Código HTML como fonte IFRAME em vez de URL

122

Este código padrão para um IFRAME, há uma maneira de substituir o URL src por apenas código html? então meu problema é simples, eu tenho uma página que carrega um corpo HTML de MYSQL. Eu quero apresentar esse código em um quadro para torná-lo independente do resto da página e nos limites dessa fronteira específica.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

html iframe frame

— Max
fonte

Respostas:

149

Você pode fazer isso com um URL de dados. Isso inclui todo o documento em uma única string de HTML. Por exemplo, o seguinte HTML:

<html><body>foo</body></html>

pode ser codificado como este:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

e, em seguida, defina como o srcatributo do iframe. Exemplo .

Edit: A outra alternativa é fazer isso com Javascript. É quase certo que essa é a técnica que eu escolheria. Você não pode garantir por quanto tempo um URL de dados o navegador aceitará. A técnica Javascript seria mais ou menos assim:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Exemplo

Edit 2 (dezembro de 2017) : use o atributo srcdoc do Html5 , assim como na resposta de Saurabh Chandra Patel , que agora deve ser a resposta aceita! Se você puder detectar o IE / Edge com eficiência , uma dica é usar a biblioteca srcdoc-polyfill apenas para eles e o atributo srcdoc "puro" em todos os navegadores não IE / Edge (verifique caniuse.com para ter certeza).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

— solitário
fonte

Suporte ao Internet Explorer? O URI de dados não pode representar arquivos html no IE8

— franzlorenzon

Existe uma maneira de fornecer cabeçalhos de origem cruzada aqui? Chrome continua reclamando Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

— jozxyqk

@AndrewSwan Não entendo muito bem o problema das aspas simples. Você pode me dar um exemplo?

— Septagrama

Para qualquer um como eu que estava procurando como codificar HTML dessa forma com php, você quer rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba

Observe que se você usar o innerHTMLnavegador, não executará tags de script descendentes. Para obter mais informações, verifique a seção Considerações de segurança da página Element.innerHTML MDN.

— Leonid Vasilev

usar html5o novo atributo de srcdoc(srcdoc-polyfill) Documentos

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Suporte ao navegador - testado nos seguintes navegadores:

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

— Saurabh Chandra Patel
fonte

Obrigado ! Eu precisava de uma solução para um webview moderno de webkit e essa era de longe a maneira mais simples de fazer isso!

— Antoine Bolvy

Não é compatível com o IE

— cara,

CanIUse.com diz que o suporte é muito fraco: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri Não, diz suporte nativo ruim, não do polyfill.

— Walf

Mas isso quebra assim que você começa a usar aspas

— Agil

De acordo com a W3Schools, o HTML 5 permite que você faça isso usando um novo atributo "srcdoc" , mas o suporte do navegador parece muito limitado.

— Andrew Swan
fonte

Também existe um Polyfill para srcdoc .

— Uwe Keim

@UweKeim Obrigado por sugerir o polyfill. É leve e funciona muito bem.

— The Muffin Man

De acordo com caniuse.com, apenas os infames navegadores IE e Edge da Microsoft (além do Opera Mini) não suportam o atributo srcdoc , por isso NÃO é "muito limitado". Basta usar srcdoc-polyfill para usuários da Microsoft.

— Heitor