IFRAMES：contentWindow.beforeunload（）とonload（）の間のイベント

Question

アクセスが制限されているウェブサイトのCSSを修正しようとしています。サーバー上にページを作成することは許可されていますが、他のPHPページは生成できません。

私は、iframeにCSSを注射することを検討しています。私は最初にiframeを隠してから、私の変更が行われた後にそれを明らかにする。

残念ながら、私がiframe.contentWindow.documentへのアクセスを知っている唯一の時間は、iframe.onload()イベントが発生した後です。ほとんどのページは非同期に読み込まれ、ソーシャルメディアのコンテンツを含むすべての外部コンテンツがロードされている間に、画面上のコンテンツを見るのに3秒待っていたのは7〜10秒待っています。

onload()より前に発生するイベントがありますが、私は新しい文書にアクセスできますか？私はちょうどstylesheetを頭に注入したいのですが、DOMの90％が「準備完了」であるかどうかは気にしません。これはあなたが後にしているものの一種である場合は

Answer 1

わからない - しかし、それは

NOTEを助ける可能性があります - 私は、しかし、私は一般的にこの種のコードを好きではない、私はもともと私が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); 
});