Question

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

我正在探索将CSS注入iframe。我首先隐藏iframe，然后在我做出更改后将其显示出来。

不幸的是，我唯一知道自己可以访问iframe.contentWindow.document的时间是在iframe.onload()事件触发后。大多数页面都是异步加载的，所以当所有外部内容都被加载时，包括社交媒体内容在内的3秒等待看到屏幕上的内容现在是令人痛苦的7-10秒等待。

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

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

IFRAMES：contentWindow.beforeunload（）＆amp;之间的事件。的onload（）

1 个答案: