翻译强力驱动Simple question which I can't seem to find an answer of: I have two iframes on a page and I'd like to copy the content of the first one to the second. But I can't do it by just copying the url of the first iframe to the second since the containing page is a dynamic one.
This code does do it, but a lot of the page-formatting seems to get lost. And I don't know if it's cross-browser either.
iframe2.contentWindow.document.write(iframe1.contentWindow.document.body.innerHTML);Can this be done?
Native JavaScript Solution As Asked For:
First, to make things simple I created 2 object literals:
var iframe1 = { doc : undefined, head : undefined, body : undefined }; var iframe2 = { doc : undefined, head : undefined, body : undefined };Next, I put everything under iframe1's window.onload handler to make sure it was loaded fully:
document.getElementById("iframe1").contentWindow.onload = function() { Then I assigned all of the object literal properties:
iframe1.doc = document.getElementById("iframe1").contentWindow.document; iframe1.head = iframe1.doc.getElementsByTagName("head")[0]; iframe1.body = iframe1.doc.getElementsByTagName("body")[0]; iframe2.doc = document.getElementById("iframe2").contentWindow.document; iframe2.head = iframe2.doc.getElementsByTagName("head")[0]; iframe2.body = iframe2.doc.getElementsByTagName("body")[0];Next, I needed to create a couple functions removeNodes() and appendNodes() so that I could re-factor some code that is used for both <head> and <body> routines.
function removeNodes(node) { while (node.firstChild) { console.log("removing: " + node.firstChild.nodeName); node.removeChild(node.firstChild); } }and:
function appendNodes(iframe1Node, iframe2Node) { var child = iframe1Node.firstChild; while (child) { if (child.nodeType === Node.ELEMENT_NODE) { console.log("appending: " + child.nodeName); if (child.nodeName === "SCRIPT") { // We need to create the script element the old-fashioned way // and append it to the DOM for IE to recognize it. var script = iframe2.doc.createElement("script"); script.type = child.type; script.src = child.src; iframe2Node.appendChild(script); } else { // Otherwise, we append it the regular way. Note that we are // using importNode() here. This is the proper way to create // a copy of a node from an external document that can be // inserted into the current document. For more, visit MDN: // https://developer.mozilla.org/en/DOM/document.importNode iframe2Node.appendChild(iframe2.doc.importNode(child, true)); } } child = child.nextSibling; }With those functions created, now all we have to do is make our calls:
console.log("begin removing <head> nodes of iframe2"); removeNodes(iframe2.head); console.log("begin removing <body> nodes of iframe2"); removeNodes(iframe2.body); console.log("begin appending <head> nodes of iframe1 to iframe2"); appendNodes(iframe1.head, iframe2.head); console.log("begin appending <body> nodes of iframe1 to iframe2"); appendNodes(iframe1.body, iframe2.body);... and finally, we close off the window.onload function:
};