私は非表示のiframe要素をページに追加するために遊んでいますが、一度ロードされたこれらのDOMを操作したいと思います。 iframeをまだロードしていないため、ページにiframeを追加した直後にDOMの操作を開始できないことに気付きました。これは、DOMContentLoaded
イベントでは実行できません。これは、iframeに存在しないドキュメントがページに追加されるまで発生するため、load
イベントを使用する必要があるためです。 。
ここにいくつかのテストコードがあります:
var iframe = document.createElement('iframe');
iframe.onload = function() { console.log('loaded!'); };
document.getElementsByTagName('body')[0].appendChild(iframe);
これは期待どおりに動作しますが、addEventListener
に変更すると、DOMに追加されません。
var iframe = document.createElement('iframe');
iframe.addEventListener('load', function() { console.log('loaded!'); });
document.getElementsByTagName('body')[0].appendChild(iframe);
IEでattachEvent
をテストしていません。
誰かがこれに光を当てていますか?
addEventListener()
関数には3つの引数が必要です! https://developer.mozilla.org/en/DOM/element.addEventListener を見てください。
3番目の引数はオプションとしてマークされていますが、次のように書かれています。
このパラメーターは、すべてのブラウザーバージョンで省略可能ではないことに注意してください。
いつ、どこで必要かはわかりませんが、FF4でのテストでは、2つの引数を指定してaddEventListener
を呼び出すと例外がスローされました。
キャッチされない例外:[Exception ... "引数が足りません" nsresult: "0x80570001(NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost/index.php :: :: line 10 "データ:いいえ]
ちなみに、あなたのコードはChrome [string loaded!
はコンソールにログインしています]。
FFと同様に、IE9は標準モードで3番目の引数を必要とします(<!DOCTYPE html>
)。 IE9はW3Cのイベントモデルをサポートする最初のIEです。したがって、以前のバージョンではattachEvent
を試す必要があります。以前のIEはありませんが、IE7 /で動作しました8標準モードおよびIE9のQuirksモードでさえ、私が使用したコードは次のとおりです。
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<script>
window.onload=function(){
var iframe = document.createElement('iframe');
var func = function() { console.log('loaded!');};
if(iframe.addEventListener)
iframe.addEventListener('load', func, true);
else if(iframe.attachEvent)
iframe.attachEvent('onload',func);
document.body.appendChild(iframe);
}
</script>
</body>
</html>
これは私のために働いています:
html:
iframe source code: <br />
<textarea id="output" rows="20" cols="60">loading ...</textarea>
javascript(documentReady上):
var iframe = document.createElement('iframe');
iframe.id = iframe.name = "testframe";
iframe.src = "http://fiddle.jshell.net";
iframe.width = 400;
iframe.height = 100;
iframe.style.display = "none";
if (iframe.addEventListener)
iframe.addEventListener("load", loaded, false);
else
iframe.attachEvent("onload", loaded);
function loaded() {
var html;
if (iframe.contentDocument)
html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML;
else
html = window.frames[iframe.name].document.getElementsByTagName("html")[0].innerHTML;
document.getElementById("output").value = html;
}
document.getElementsByTagName("body")[0].appendChild(iframe);
デモを参照してください: http://jsfiddle.net/WcKEz/
AddEventListenerと連携しますが、attachEventへのフォールバックが含まれます。もちろん、同じドメインでのみIFRAMEのDOMにアクセスできます。
最初の例は機能しますか?あなたが何を探しているのか正確にはわかりませんが、これはイベントが機能するときに明らかになるはずです:jQuery document.ready source
addEventListenerはIEでは機能しないため、テストしている場合、2番目はiframeが追加される前に失敗します。
ただし、ページ自体からコールバックを追加することもできます(たとえば、jQueryを使用してホイールを再発明しないようにします)。$(iframe).ready() {..}
が一貫した動作を提供すると思います。