javascript - IFRAMES : event between contentWindow. beforeunload() & onload()

Question

我正在尝试修改我访问权限有限的网站上的一些 CSS。我已被允许在服务器上创建页面，但无法修改网站上其他 PHP 生成的页面。

我正在探索将 CSS 注入(inject) iframe 中。我首先隐藏 iframe，然后在进行更改后显示它。

不幸的是，我唯一一次知道我可以访问 iframe.contentWindow.document 是在 iframe.onload() 事件触发之后。页面的大部分内容都是异步加载的，因此在加载所有外部内容(包括社交媒体内容)时，原本需要 3 秒才能看到屏幕上内容的等待现在变成了令人痛苦的 7-10 秒等待。

是否有任何事件在 onload() 之前触发，让我知道我可以访问新文档？我只想将 stylesheet 注入(inject)头部，我不在乎 90% 的 DOM 是否“准备就绪”。

Answer 1

不确定这是否是您想要的东西 - 但它可能会有所帮助

注意:我一般不喜欢这种类型的代码，我原本以为我会使用 MutationObserver - 但是，我发现我必须在等待 iframe 的 contentDocument 指示内容已开始加载时执行类似上述操作，然后才能附加突变观察器 - 然后我会错过 head一半的时间都被附加元素!

Firefox 在 iframe 上有一个 mozbrowserloadstart 事件 - 但这只是 Firefox，所以在其他地方根本没用

function limitedRetryWithDelay(count, delay, tester, cb) {
    var res = tester();
    if(res) {
        cb(res);
    } else {
        if (count > 0) {
            setTimeout(function() {
                limitedRetryWithDelay(count - 1, delay, tester, cb);
            }, delay);
        }
    }

}
// next 3 lines is just how I tested it - you'll need a reference to the iframe node instead for "tgt"
var tgt = document.createElement('iframe');
document.body.appendChild(tgt);
tgt.src = '/index.html?_=' + Math.random() + '_' + Math.random();
// end testing code

// try every 10ms for 5 seconds because (500 * 10 = 5000ms)
limitedRetryWithDelay(500, 10, function (e) {
    return tgt.contentDocument && tgt.contentDocument.location != 'about:blank' && tgt.contentDocument.head;
}, function(head) {
    console.log('head is', head);
});

顺便说一句，在对文档执行某些操作之前，您可能不需要等待 head 出现，您很可能只需等待 contentDocument

limitedRetryWithDelay(500, 10, function (e) {
    return tgt.contentDocument && tgt.contentDocument.location != 'about:blank' && tgt.contentDocument;
}, function(doc) {
    console.log('document is', doc);
});