web-dev-qa-db-ja.com

onloadとaddEventListener（ 'load'）のiframe動作

私は非表示の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をテストしていません。

誰かがこれに光を当てていますか？

javascripthtmliframeonload-event
19
roryf

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>
19
Hrant Khachatrian

これは私のために働いています：

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にアクセスできます。

1
roberkules

最初の例は機能しますか？あなたが何を探しているのか正確にはわかりませんが、これはイベントが機能するときに明らかになるはずです：jQuery document.ready source

$（document）.ready相当、jQueryなし

addEventListenerはIEでは機能しないため、テストしている場合、2番目はiframeが追加される前に失敗します。

ただし、ページ自体からコールバックを追加することもできます（たとえば、jQueryを使用してホイールを再発明しないようにします）。$(iframe).ready() {..}が一貫した動作を提供すると思います。

0
Jamie Treworgy