重複的iframe：從1個iframe複製頭和身體到另一個

簡單的問題，我似乎無法找到答案：我有一個頁面上有兩個iframe，我想複製第一個到第二個。但我不能通過將第一個iframe的url複製到第二個，因爲包含頁面是動態頁面。重複的iframe：從1個iframe複製頭和身體到另一個

這段代碼的確行得通，但很多頁面格式似乎都丟失了。而且我不知道它是否是跨瀏覽器。

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

可以這樣做嗎？

來源

2012-03-29 Clox

它們全部是由t他是同一個域名？ – 2012-03-29 17:38:46

是的，相同的域名 – Clox 2012-03-29 17:53:52

本地JavaScript解決方案作爲問：

首先，使事情變得簡單，我創建2個對象文本：

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功能：

};

來源

2012-03-29 17:40:59

謝謝你的答案。沒有jQuery或類似的呢？那麼有沒有簡單的方法？是的，他們在同一個域名 – Clox 2012-03-29 17:55:08

@Clox - 查看我的編輯。我不確定如何或何時調用此代碼。如果您在父頁面的初始頁面加載時調用它，則可能需要將此代碼封裝在'setTimeout（）'調用或for循環中，等待直到'iframe1'和'iframe2'不是'undefined' 。 – 2012-03-29 18:18:17

感謝您的回覆（並對我遲到的回覆感到抱歉）。我嘗試了你的建議，似乎和我在問題中所說的一樣。它複製html但css格式會丟失。實際上，我通過複製document.head幾乎解決了這個問題，但是由於某種原因（即沒有研究它爲什麼會這麼做）它失敗了，而且腳本元素似乎也沒有被複制。頁面中的鏈接都不起作用，因爲它們全都依賴於javascript和__doPostBack，而不是正常的鏈接。任何解決方案？ =） – Clox 2012-04-02 23:43:42

重複的iframe：從1個iframe複製頭和身體到另一個

回答

相關問題