從父頁面克隆JavaScript標籤到子頁面

我使用window.open創建一個空窗口，然後使用jQuery DOM操作方法填充它。我想要做的一件事就是確保新窗口中的所有可用腳本都在父窗口中。我也複製所有的樣式表，再加上這是在父窗口HEAD部分的任何其他數據，所以我決定做的是這樣的：從父頁面克隆JavaScript標籤到子頁面

$(floatingMap.window.document.head).append(
      $("<base>", {"href": location.href})).append(
      $("head").children().clone()));

這首先創建一個<base>標籤，可確保相對URL源文檔被正確解釋，然後從源文檔的頭部注入所有標籤的副本。我可以使用Chrome的DOM檢查器檢查新窗口中的注入對象，並且一切看起來都正常，但是我遇到的問題是腳本未加載。另一方面，樣式表加載正常。任何想法，我可以做什麼，使腳本加載正確？

更新：

在潛在相關的問題，我發現下面的代碼有意想不到的結果：

$(floatingMap.window.document.head).append(
    $("<script>").text("window.opener.childWindowReady()"));

這將導致指定的代碼在父窗口的上下文中執行，而不是子窗口。任何想法，爲什麼會是這種情況？

來源

2013-10-13 Jules

是否有原因不簡單地從網址加載網頁？ – olleicua

是：頁面內容必須基於客戶端已知的信息動態生成。快速週轉也是一個需求，所以我想避免服務器往返。 – Jules

這似乎是一個jQuery的錯誤。從jQuery操作不包括腳本標記，然後將那些使用純JavaScript按預期工作：

var scripts = document.getElementsByTagName("script"); 

    function loadScript (index) 
    { 
     if (index == scripts.length) 
      onChildWindowReady(); 
     else if (scripts[index].src) 
     { 
      console.log ("injecting: " + scripts[index].src); 
      var inject = document.createElement("script"); 
      inject.src = scripts[index].src; 
      floatingMap.window.document.head.appendChild(inject); 
      inject.onload = function() { loadScript (index + 1); }; 
     } 
     else 
      loadScript (index + 1); 
    } 
    loadScript (0);

來源

2013-10-13 18:20:18 Jules

除了用document.writeln，可以動態地添加的所有內容，並執行它們。

例如，

jQuery(document).ready(function(){ 
    jQuery('body').append("jquery loaded"); 
    var w = window.open(); 
    var htmlContent = document.documentElement; 
    w.document.writeln("<html>"+htmlContent.innerHTML+"</html>"); 
    w.document.close(); 

});

這演示功能打開的jsfiddle結果窗口，其中將包括的jquery以及頭內的腳本內容的克隆。

http://jsfiddle.net/6Qks8/

來源

2013-10-13 18:55:37 melc

我通常會盡量避免使用document.write，因爲http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice中描述的一些原因 - 特別是最後一個原因由接受的答案給出。 – Jules

從父頁面克隆JavaScript標籤到子頁面

回答

相關問題