21

私はページに非表示の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);

attachEventIEでテストしていません。

誰かがこれに光を当てましたか？

4

3 に答える 3

23

addEventListener()関数には3つの引数が必要です！https://developer.mozilla.org/en/DOM/element.addEventListenerを見てください

3番目の引数はオプションとしてマークされていますが、次のように記述されています。

このパラメータは、すべてのブラウザバージョンでオプションではないことに注意してください。

いつどこで必要かはわかりませんが、FF4でのテストでは、with2addEventListener引数を呼び出すときに例外がスローされました。

キャッチされない例外：[例外..."引数が足りません"nsresult： "0x80570001（NS_ERROR_XPC_NOT_ENOUGH_ARGS）"場所："JSフレーム:: http：//localhost/index.php :: ::行10"データ：いいえ]

ちなみに、あなたのコードはChromeでうまく機能します[文字列loaded!はコンソールに記録されます]。

FFと同様に、IE9には標準モードの3番目の引数が必要です（with <!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>
于 2011-05-23T17:14:53.923 に答える
1

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

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

于 2011-05-23T16:05:48.017 に答える
0

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

$（document）.readyはjQueryなしで同等

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

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

于 2011-03-07T15:29:29.910 に答える