重复iframe:将头部和身体从一个iframe复制到另一个ifame

Duplicate iframe: Copy head and body from 1 iframe to another

本文关键字：iframe 一个 复制 ifame 另一个 头部 重复      更新时间：2023-09-26

我似乎找不到答案的简单问题：我在一页上有两个iframe，我想把第一个的内容复制到第二个。但是，我不能只将第一个iframe的url复制到第二个iframe，因为包含的页面是动态的。

这段代码确实做到了，但很多页面格式似乎都丢失了。我也不知道它是否是跨浏览器的。

iframe2.contentWindow.document.write(iframe1.contentWindow.document.body.innerHTML);

这能做到吗？

要求的本地JavaScript解决方案：

首先，为了简单起见，我创建了两个对象文字：

var iframe1 = {
    doc     : undefined,
    head    : undefined,
    body    : undefined
};
var iframe2 = {
    doc     : undefined,
    head    : undefined,
    body    : undefined
};

接下来，我将所有内容放在iframe1的window.onload处理程序下，以确保它已完全加载：

document.getElementById("iframe1").contentWindow.onload = function() {

然后我分配了所有的对象文字属性：

    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];

接下来，我需要创建两个函数removeNodes()和appendNodes()，这样我就可以重新考虑一些用于<head>和<body>例程的代码。

    function removeNodes(node) {
        while (node.firstChild) { 
            console.log("removing: " + node.firstChild.nodeName);
            node.removeChild(node.firstChild); 
        } 
    }

和：

    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;
    }

创建了这些函数后，现在我们所要做的就是调用：

    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);

最后，我们关闭了window.onload函数：

};
相关文章：