在JavaScript生成的頁面上正確的window.onload調用

Question

一個簡單的HTML頁面上有一個JS函數（將其命名為function a()它通過window.open("")創建一個新的HTML頁面，然后在該頁面加載后調用腳本。 令function b()為該新頁面上的window.onload() ， newWindow為它的窗口。

我對正確調用b有一個問題。

我目前所做的是在生成的代碼中設置window.onload = b ，在函數a設置setTimeout(newWindow.b, 0) 。 在我在新頁面上用<script src='...'></script>替換<script>code...</script>之前，這種方法一直有效。 這是一個簡單的外觀示例：

function a() {
    var newWindow = window.open("");
    var d = newWindow.document;
    var script1 = d.createElement("script");
    var script2 = d.createElement("script");
    script1.type = "text/javascript";
    script2.type = "text/javascript";
    script1.src = firstScriptSource;  // external source
    script2.innerHTML = "\n\
        function b() {\n\
            //...here goes the code depending on script1 and DOM
        }\n\
        window.onload = b;";
    //...here goes some new page constructing
    d.head.appendChild(script1);
    d.head.appendChild(script2);
    setTimeout(newWindow.b, 0);
}

myButton.addEventListener("click", a);

用外部替換內部腳本后，似乎需要一些時間來加載它們並設置setTimeout(newWindow.b, 0); 一小段延遲后，它只會調用newWindow.undefined 。 但是，我可以將超時更改為1000或更多/更少，這樣就可以了，但這更像是賭博。

始終及時調用b的解決方案是什么？

Answer 1

在script2 ，您可以選擇script1的標記並監聽其load事件，然后執行b ：

function a() {
  var newWindow = window.open("");
  var d = newWindow.document;
  var script1 = d.createElement('script');
  script1.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
  d.head.appendChild(script1);
  var script2 = d.createElement("script");
  script2.textContent = `
    function b() {
      console.log('b');
      console.log(typeof $);
    }
    var script1 = document.head.querySelector('script');
    script1.addEventListener('load', b);
  `;
  d.head.appendChild(script2);
}

document.addEventListener("click", a);

https://jsfiddle.net/0u78v6gj/2/

（無法插入實時代碼段，因為堆棧代碼段沙箱無法打開窗口）

插入腳本之前，新創建的空文檔將已經 load （和DOMContentLoaded ）。