Question

在简单的HTML页面上（有function a()）有一个JS函数，可通过window.open("")创建一个新的HTML页面，然后在该页面加载后调用脚本。在这个新页面上，将function b()设为window.onload()，将newWindow设为其窗口。

我在正确调用b时遇到问题。

我目前所做的是在生成的代码中设置window.onload = b，在函数setTimeout(newWindow.b, 0)中设置a。在我在新页面上将<script>code...</script>替换为<script src='...'></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）。

在JavaScript生成的页面上正确的window.onload调用

1 个答案: