Inserindo HTML dentro de um IFrame
Igor Escobar on Ago 6th 2008
Recentemente Michael Mahemoff’s divulgou em seu blog um código interessante que encontrou dando uma olhada no código fonte do TiddlyWiki, especificamente no arquivo TiddlyWiki.js na função importTiddlyWiki.
O código é bem simples mais a sacada pode ser utilizada em muitas coisas. Ele pega uma string qualquer e injeta dentro de um IFrame. Pode parecer meio óbvio, muita gente vai pensar, ha! é so criar o elemento e usar o innerHTML e bingo! Wrong!
Vamos lá.
Primeiro criamos uma variável qualquer, com o corpo de um documento html comum concatenando com uma variável qualquer.
-
var content = "<html><body>" + text + "</body></html>";
Depois, criamos o elemento do IFrame:
-
var iframe = document.createElement("iframe");
-
document.body.appendChild(iframe);
Agora vem a terceira parte, todos pensam que basta utilizar o innerHTML, mas quando trabalhamos com IFrame precisamos utilizar uma propriedade interna chamada document.
-
var doc = iframe.document;
-
if(iframe.contentDocument)
-
doc = iframe.contentDocument; // For NS6
-
else if(iframe.contentWindow)
-
doc = iframe.contentWindow.document; // For IE5.5 and IE6
-
// Put the content in the iframe
-
doc.open();
-
doc.writeln(content);
-
doc.close();
Agora o conteúdo esta dentro do seu iframe e pode ser resgatado da seguinte forma:
-
// Load the content into a TiddlyWiki() object
-
var storeArea = doc.getElementById("storeArea");
Com esta técnica você consegue obter uma string HTML Arbitrária e parsear para o browser com a DOM engine.
Filed in Curiosidades, DHTML, Java Script | No responses yet