检测使用window.open打开的窗口的onload事件

时间:2010-06-13 02:31:03

标签: javascript internet-explorer firefox google-chrome popup

 window.popup = window.open($(this).attr('href'), 'Ad', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
 $(window.popup).onload = function()
        {
                alert("Popup has loaded a page");
        };

这在我尝试使用的任何浏览器中都不起作用(IE,Firefox,Chrome)。如何检测窗口中何时加载页面(如iframe onload)?

7 个答案:

答案 0 :(得分:50)

var myPopup = window.open(...);
myPopup.addEventListener('load', myFunction, false);

如果您关心IE,请使用以下内容作为第二行:

myPopup[myPopup.addEventListener ? 'addEventListener' : 'attachEvent'](
  (myPopup.attachEvent ? 'on' : '') + 'load', myFunction, false
);

正如您所看到的,支持IE非常麻烦,应尽量避免使用 。我的意思是,如果你需要支持IE,因为你的观众,无论如何都要这样做。

答案 1 :(得分:18)

如果弹出窗口的文档来自不同的域,则根本不可能。

2015年4月更新:我错了:如果您拥有这两个域you can use window.postMessage and the message event pretty much all browsers今天相关

如果没有,如果没有加载到弹出窗口中的文档的帮助,你仍然无法跨浏览器进行这项工作。您需要能够检测加载后弹出窗口中的更改,这可能是弹出页面中的JavaScript在处理自己的load事件时设置的变量,或者您是对它有一些控制权你可以在开场白中添加对函数的调用。

答案 2 :(得分:6)

如上所述,这个答案的https://stackoverflow.com/a/3030893又名Detecting the onload event of a window opened with window.open解决方案是理想的:

javascript: /* IE will use 1 ignore 1 w/ error, FF t'other way 'round */
 (function(ow){
   ow . addEventListener(  'load', function(){alert("loaded")}, false);
   ow .      attachEvent('onload', function(){alert("loaded")}, false);
  }(window.open(prompt("Where are you going today?",location.href),"snapDown")))

但是,其他评论和答案会产生一些错误的误解,如下所述。

以下脚本演示了定义onload的气质时间变化。将脚本应用于快速加载location.href,例如file:///和一些慢速站点以查看问题。可以看到onload消息或者根本没有消息(通过重新加载已加载的页面,可以看到所有3个变体)。还假设正在加载的页面本身没有定义会导致问题复杂化的onload事件。

onload的事件处理程序定义绝对不是“内部弹出窗口的HTML标记”,尽管它们最终将驻留在body的{​​{1}} ...的DOM中。 / p>

HTML

你能做什么:

  • 打开外国网址
  • 关于该外国URL pg。地址栏输入javascript: window.popup=window.open(location.href,'snapDown'); window.popup.onload=function(){alert("message one ")}; alert("message 1 maybe too soon\n"+window.popup.onload); window.popup.onload=function(){alert("message two")}; alert("message 2 maybe too late\n"+window.popup.onload); URI
    它将继承与外部URL相同的站点策略 NB。由于地址栏URI javascript: ...在最近(大约2012年)的浏览器中无效,因此可能需要将javascript标记为书签
  • 这有效地提供了跨域访问,但请注意:
    1. javascript对于网页或网站而言不是,这意味着它的来源具有无国籍国籍,因此本质上满足css(x-site scripting)和sop(同源政策)移民规则< / LI>
    2. 通过地址栏或书签AND来手动调用 该脚本手动输入到这些位置

因此,任何页面,无论其来源如何,都可以像以下一样进行修改:

javascript:

(好吧......) javascript: if(confirm("wipe out links & anchors?\n"+document.body.innerHTML)) void(document.body.innerHTML=document.body.innerHTML.replace(/<a /g,"< a "))
Mozilla的FF故障排除页面和其他jar:file:///usr/lib/firefox/omni.ja!/chrome/toolkit/content/global/aboutSupport.xhtml档案是例外情况)

另一个例子:
要经常禁用google篡夺目标pg。点击,更改它的jar功能如下:

rwt

并将其标记为javascript:void(rwt=function(unusurpURL){return unusurpURL}) spay google?)即。它是“固定的”。

然后在点击任何neuteralize google点击之前点击此书签,因此任何点击的书签都是干净的,而不是google对它们造成的混乱的变态像差。

完成的测试
google

应该注意的是,Mozilla中的window.navigator.userAgent= Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0 只有一个非标准的第四个布尔参数,如果addEventListener允许为外部页面实例化不受信任的内容触发器。

REF:
element.addEventListener | Document Object Model (DOM) | MDN:
Interaction between privileged and non-privileged pages | Code snippets | MDN:

书签:
Detecting the onload event of a window opened with window.open

答案 3 :(得分:3)

这对我有用;完整的例子:

HTML:

<a href="/my-popup.php" class="import">Click for my popup on same domain</a>

使用Javascript:

(function(){
    var doc = document;

    jQuery('.import').click(function(e){
        e.preventDefault();
        window.popup = window.open(jQuery(this).attr('href'), 'importwindow', 'width=500, height=200, top=100, left=200, toolbar=1');

        window.popup.onload = function() {
            window.popup.onbeforeunload = function(){
                doc.location.reload(true); //will refresh page after popup close
            }
        }
    });
})();

答案 4 :(得分:1)

onload事件处理程序必须位于弹出窗口的HTML <body>标记内。

答案 5 :(得分:0)

核心问题似乎是您正在打开一个窗口来显示其内容已在浏览器中缓存的页面。因此,不会发生加载,因此也不会发生加载事件。

一种可能性是改为使用'pageshow'-event,如以下所述:

https://support.microsoft.com/en-us/help/3011939/onload-event-does-not-occur-when-clicking-the-back-button-to-a-previou

答案 6 :(得分:0)

首先,当您加载 first 初始窗口时,将对其进行缓存。因此,从 first 窗口创建 new 窗口时,新窗口的内容不是从服务器加载的,而是从缓存加载的。因此,创建 new 窗口时,不会发生onload事件。

但是,在这种情况下,会发生onpageshow事件。它总是在onload事件之后发生,即使从缓存加载页面也是如此。另外,现在所有主要浏览器都支持它。

 window.popup = window.open($(this).attr('href'), 'Ad', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
 $(window.popup).onpageshow = function() {
     alert("Popup has loaded a page");
 };

w3school website详细说明了这一点:

  

onpageshow事件与onload事件类似,不同之处在于它在页面首次加载时在onload事件之后发生。此外,每次页面加载时都会发生onpageshow事件,而从缓存中加载页面时不会发生onload事件。