javascript 如何在加载前获取 Iframe 事件？

How can I get Iframe event before load?

提问by Pmillan

In my site, I use an iframeA in an iframeB, and, when the iframeA changes it's content I have to set the src. I can set it only with the onload event, but this called when the site is loaded. I am looking for some event or trigger, that helps me detect the location/src change before it starts loading. I don't want to wait the whole page load, before the src set. I have no direct access to iframeA (just the script below)

在我的网站中，我在 iframeB 中使用 iframeA，并且当 iframeA 更改其内容时，我必须设置 src。我只能使用 onload 事件设置它，但是在加载站点时会调用它。我正在寻找一些事件或触发器，这有助于我在开始加载之前检测位置/src 更改。我不想在 src 设置之前等待整个页面加载。我无法直接访问 iframeA（只是下面的脚本）

Some code:

一些代码：

var myframe = document.getElementById('frameB').contentWindow.document.getElementById('frameA');
myframe.onload=function (funcname) {...};

采纳答案by Jasper

What will be changing the source of the iframe? If you have access to that code then you can do whatever is in your onloadfunction then.

什么会改变 iframe 的来源？如果您有权访问该代码，那么您就可以执行onload函数中的任何操作。

If a link has it's targetattribute set to the iframe and that is how the source is changing then you can hi-Hyman the link clicks:

如果链接的target属性设置为 iframe 并且源正在更改，那么您可以劫持链接点击：

$('a[target="frameB"]').bind('click', function () {
    //run your onload code here, it will run as the iframe is downloading the new content
});

Also, just a side-note, you can bind an event handler for the loadevent in jQuery like this:

另外，顺便提一下，您可以load像这样在 jQuery 中为该事件绑定一个事件处理程序：

$('#frameB').bind('load', function () {
    //run onload code here
});

UPDATE

更新

SITE -> frameB -> frameA

站点 -> 框架 B -> 框架 A

$("#frameB").contents().find("#frameA").bind('load', function () {
    //load code here
});

This selects the #frameBelement (that is in the current top level DOM), gets it's contents, finds the #frameAelement, and then binds an event handler for the loadevent.

这将选择#frameB元素（即在当前顶级 DOM 中），获取它的内容，找到该#frameA元素，然后为该load事件绑定一个事件处理程序。

Note that this code must be run after #frameBis loaded with the #frameAelement already present in it's DOM. Something like this might be a good idea:

请注意，此代码必须在#frameB加载#frameA已存在于其 DOM 中的元素后运行。像这样的事情可能是个好主意：

$('#frameB').bind('load', function () {
    $(this).contents().find('#frameA').bind('load', function () {
        //run load code here
    });
});

UPDATE

更新

To hi-Hyman links in the #frameBelement:

劫持#frameB元素中的链接：

$('#frameB').contents().find('a[target="frameA"]').bind('click', function () {
    /*run your code here*/
});

This will find any link in the #frameBelement that has its targetattribute set to frameAand add a clickevent handler.

这将在#frameB元素中找到其target属性设置为的任何链接frameA并添加一个click事件处理程序。

And again, this will only work if the #frameBiframe element has loaded (or atleast gotten to the document.readyevent) so you can select it's elements.

同样，这仅在#frameBiframe 元素已加载（或至少到达document.ready事件）时才有效，因此您可以选择它的元素。

回答by dodov

Check this gistor my answerto this question. The code there does exactly that:

检查这个主旨还是我的回答这个问题。那里的代码正是这样做的：

function iframeURLChange(iframe, callback) {
    var unloadHandler = function () {
        // Timeout needed because the URL changes immediately after
        // the `unload` event is dispatched.
        setTimeout(function () {
            callback(iframe.contentWindow.location.href);
        }, 0);
    };

    function attachUnload() {
        // Remove the unloadHandler in case it was already attached.
        // Otherwise, the change will be dispatched twice.
        iframe.contentWindow.removeEventListener("unload", unloadHandler);
        iframe.contentWindow.addEventListener("unload", unloadHandler);
    }

    iframe.addEventListener("load", attachUnload);
    attachUnload();
}

It utilizes the unloadevent. Whenever a page is unloaded, a new one is expected to startloading. If you listen for that event, though, you will get the current URL, not the new one. By adding a timeout with 0 milliseconds delay, and thenchecking the URL, you get the new iframe URL.

它利用unload事件。每当卸载页面时，预计会开始加载新页面。但是，如果您侦听该事件，您将获得当前 URL，而不是新 URL。通过添加 0 毫秒延迟的超时，然后检查 URL，您将获得新的 iframe URL。

However, that unloadlistener is removed each time a new page is loaded, so it must be re-added again on each load.

但是，unload每次加载新页面时都会删除该侦听器，因此必须在每个load.

The function takes care of all that, though. To use it, you only have to do:

不过，该函数会处理所有这些。要使用它，您只需执行以下操作：

iframeURLChange(document.getElementById("myframe"), function (url) {
    console.log("URL changed:", url);
});

回答by MarzSocks

You could also try taking the approach of detecting when your iframe is going to leave its current location. This may be useful in some situations. To do this, put the following code in you iFarme source.

您还可以尝试采用检测 iframe 何时离开当前位置的方法。这在某些情况下可能很有用。为此，请将以下代码放入 iFarme 源中。

$(window).on('beforeunload', function () {

alert('before load ...');

});

$(window).on('beforeunload', function () {

alert('加载前...');

});

回答by ShankarSangoli

I think adding inline onloadattribute with appropriate event handler to iframetag will solve your problem.

我认为将onload带有适当事件处理程序的内联属性添加到iframe标签将解决您的问题。

function onIframeLoad(){
   //Write your code here
}

Markup change

标记更改

<iframe src='..' onload='onIframeLoad()' />