Home/ Questions/Q 7715125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:18:26+00:00

Simple question which I can’t seem to find an answer of: I have two

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    };
    • 0