Question

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

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选项卡上加载事件？以及如何让它正常工作？

Answer 1

如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/”页面，您会看到，点击起始页面时出现以下错误：

并且，从调试环境：

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

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

是否可以添加这样的监听器（加载）？是的，但我知道的唯一方法是创建一个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”。

Answer 2

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

即使setTimeout对象为空或抛出错误，所以如果你说它使用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>

Answer 3

请试试这个，

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

Answer 4

加载每个文档时会触发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 ...");

为什么没有使用window.open在tab选项卡上加载事件？

4 个答案: