jQuery onload - 動的にロードされるiframeで動作しないイベント.load（） - イベント

Question

ユーザーがボタンをクリックすると、スクリプトによってiframeが読み込まれます。 iframeが読み込まれた後に別の関数を呼び出そうとしていますが、動作していません。 iframeは正常にロードされますが、iframeのロードが完了した後に.load（）イベントが呼び出されることはありません。 iframeには同じウェブサイトのコンテンツ（外部コンテンツなし）が含まれています。奇妙なことは、私がコード内の他のいくつかの点で以下に説明する同じテクニックを使用していて、完全に機能していることです。誰かが私が次に調べるべきことを提案することはできますか？

$('#myIframe').load(function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>')); 
}); 

Answer 1

がここで問題に幾分似思える：

jQuery .ready in a dynamically inserted iframe

iframe要素は、APPENDとドムに存在するこの方法

はここに関連するコードです。 URLを設定するときだけ、ロードされます。最後にタグを付けるロード機能がアタッチされた時点で終了します。 だからあなたのコードの

$('#someButton').live('click', function() { 

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>')); 
    $('#myIframe').attr('src',"https://www.mywebsite.com"); 

    $('#myIframe').load(function() { 
     alert('iframe loaded'); 
    }); 

}); 

Answer 2

あなたはそれが loadに添付なしイベントハンドラを持っていないときにDOMの中にその要素を配置し、存在しない要素に結合されているので、あなたのコード例が動作しない理由はあり

イベント。このお試しください：

$('#someButton').live('click', function() { 
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function() { 
     alert('iframe loaded'); 
    }).attr('src', 'https://www.mywebsite.com'); 
    $('body').append($iframe); 
}); 

またはあなたのorigionalコードに近いが、あなたは.live('load')で​​を置き換えることができます。

$('#myIframe').live('load', function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary 
}); 

Answer 3

あなたはiframe内にロードされている文書は、あなたがコントロールする何かであれば、負荷ハンドラを入れてみてくださいその文書に入れる。あなたはインラインフレームをロードした後に何かをする親文書が必要な場合は、子から親に関数を呼び出すことができます。

// in parent doc 
function myIframeLoaded() { 
    // do something 
} 

// in iframe doc 
$(document).load(function() { // or .ready() 
    parent.myIframeLoaded(); 
} 

Answer 4

はこれを試してみてください：

$("<iframe id='myId'></iframe>").appendTo("body") 
    .attr('src', url) 
    .load(function() 
    { 
     callback(this); 
    }); 

ジャスト要素を作成し、いくつかのチェーンを追加しましたセレクターは通常（これは可能です）移動し、それを本文に追加します。