2014-05-19 6 views
1

Je reçois actuellement des parties d'une page Web via un XHR, puis les analyse à l'aide du DOMParser. Après cela, je change certains éléments, mais je n'arrive pas à ajouter le document à l'iFrame.Ajouter un document à iFrame

Le document qui est analysé est bien, mais quand ce document annexant l'iFrame en appelant iFrame.contentDocument = parsedDocument, iFrame.contentDocument reste vide (en fait il y a html, tête et balises corps, mais leur contenu est vide).

J'analyse les données reçues comme ceci:

var parser = new DOMParser(); 
var parsedDocument= parser.parseFromString(xhr.response, 'text/html'); 

Et mon attente était de faire quelque chose comme ceci:

iFrame.contentDocument = parsedDocument; 
+0

Et si vous lui écrivez? 'var doc = document.getElementById ('iframeId'). contentWindow.document; doc.open(); doc.write (parsedDocument); doc.close(); ' – epascarello

+0

@epascarello Il apparaît maintenant' [objet HTMLDocument] 'dans l'iFrame. – MarijnS95

+0

@ MarijnS95 Vous devriez essayer 'xhr.response' au lieu de' parsedDocument'. 'parsedDocument' est un objet' HTMLDocument', alors que vous voulez écrire la chaîne actuelle, sinon il va essayer d'écrire 'HTMLDocument.toString()' qui retournera '[object HTMLDocument]'. – Joeytje50

Répondre

1

Comme epascarello dit dans les commentaires, ce qui suit fonctionnera:

var doc = document.getElementById('iframeId').contentWindow.document; 
doc.open(); 
doc.write(xhr.response); 
doc.close(); 

Mais, puisque vous devez modifier le document avant de le placer dans l'ifra moi, vous devez d'abord faire ceci:

//your code 
var parser = new DOMParser(); 
var parsedDocument = parser.parseFromString(xhr.response, 'text/html'); 
//put your required edits here 
parsedDocument.getElementById('foo').style.color = 'red'; //example 
//now to get back the edited HTML code as a string 
var newHTML = parsedDocument.documentElement.outerHTML; 
//and now for the code epascarello mostly wrote 
var doc = document.getElementById('iframeId').contentWindow.document; 
doc.open(); 
doc.write(newHTML); 
doc.close(); 

Vous pouvez également spécifier un type de document là, en remplaçant la ligne de doc.write(newHTML); avec:

doc.write('<!DOCTYPE html>'+ newHTML); 

depuis le document.documentElement.outerHTML ne contiendra pas le doctype avec.