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

Question

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

部分代码:

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

Answer 1

检查这个gist或者我的 answer对此question .那里的代码正是这样做的:

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();
}

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

但是，每次加载新页面时都会删除 unload 监听器，因此必须在每次 load 时重新添加它。

不过，该函数会处理所有这些。要使用它，您只需要做:

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