为什么在window.open的tab opend上没有onload事件工作？

问题描述 投票：5回答：4

我打开一个新的空白标签。现在，从此选项卡我需要在新选项卡中打开一个网站。我这样做如下。在我的控制台中我写道：

var wild = window.open("https://css-tricks.com/", "mywin", '');

这很好。现在我可以使用wild.document访问这个新窗口。现在我希望在加载dom之后在该页面上执行一些代码。我使用onload事件：

function foo(){
    var mytext = wild.document.body.textContent;
    alert( mytext );
}
wild.addEventListener("load", foo);

但不幸的是，警报不会发生。我也尝试将事件监听器作为explained in this answer放在匿名自调用函数中，但这也不起作用。我也试过ondomload事件，但不幸的是，这也没有用。所以，

为什么在window.open的tab opend上没有onload事件工作？以及如何让它正常工作？

javascript jquery dom browser dom-events
4个回答
5
投票

如Detecting the onload event of a window opened with window.open所述，以下演示工作正常：

var wild;

window.addEventListener('DOMContentLoaded', function(e) {
  wild = window.open("myLocalStaticPage.html", "mywin", '');
  wild[wild.addEventListener ? 'addEventListener' : 'attachEvent'](
    (wild.attachEvent ? 'on' : '') + 'load', function (e) {
      alert("loaded")
    }, false);
});

// the following handler only used for test purposes
document.addEventListener('click', function(e) {
  try {
    alert(wild);
  } catch(err) {
    alert(err);
  }
}, false);

我在源页面上添加了一个监听器，这样您只需单击页面即可测试Wild变量的值。

对于静态页面没有问题。

但是，如果您需要打开经典的“http://google.com/”页面，您将看到，点击起始页面时出现以下错误：

enter image description here

并且，从调试环境：

enter image description here

他们是什么意思？当您打开谷歌页面时，谷歌会自行重定向，这是你无法控制的。

为什么会这样？为了避免刮擦......仅举例来说。

是否可以添加这样的监听器（加载）？是的，但我知道的唯一方法是创建chrome扩展，或FF扩展或IE .....因为扩展api（javascript）为您提供了无痛苦的可能性。

如果您对Chrome api感兴趣，可以查看manifest以及更多详细信息，如"content_scripts"，如：

"content_scripts": [{
"matches":    ["*://*/*"],
"js":         ["content.js"],
"run_at": "document_end",
"all_frames": true

}],

其中“run_at”参数：

控制何时注入js中的文件。可以是“document_start”，“document_end”或“document_idle”。默认为“document_idle”。

1
投票

您正在加载外部网站，因此您应该收到跨源框架错误（我在Chrome控制台中测试您的代码时会这样做。）当我在Firefox中测试它时，窗口对象为空。在Safari中，对象未定义。

即使使用setTimeout，对象为null或抛出错误，所以如果你说它使用setTimeout工作，我会分享该代码。除非原点相同（因此页面相同），否则不允许您访问另一个窗口的文档。至少这是我的理解。

我会在第一页打开另一个窗口有一个脚本：

<body>
 <script type="text/javascript">
   window.open('http://www.linktoyourotherpage.com/', 'mywin', '');
 </script>
</body>

以及操作文档的另一个页面的脚本

<body onload="foo()">
  <script type="text/javascript">
    function foo() {
      var mytext = document.body.textContent;
      alert( mytext );
    }
  </script>
</body>
0
投票

请试试这个，

function foo() {
    var wild = window.open("http://google.com/", "mywin", '');
    wild.addEventListener("load", function(){
        var mytext = wild.document.body.textContent;
        alert( mytext );        
    });
}
0
投票

加载每个文档时会触发window.onload事件。

var wild=null;

      function load() {
            if(wild !=null)
            {
               alert("load event detected!  :"+wild.location.hostname+wild.location.pathname);
             }
             else
               alert("not yet loaded");
          }
      window.onload = load;

      wild = window.open("https://www.google.co.in/", "mywin", ''); // Security Exception raise due to Cross orgin security enabled google.co.in
     // wild = window.open("https://localhost:5555/test.html", "mywin", ''); //This will  work when same origin policy
     console.log("After Loading ...");
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.