web-dev-qa-db-ja.com

jQuery iframe load（）イベント？

そのようなことがあるかどうか誰もが知っていますか？

$.ajax()で挿入されるiframeがあり、iframeのコンテンツが完全に読み込まれた後に何かをしたい：

....
 success: function(html){  // <-- html is the IFRAME (#theiframe)
          $(this).html(html);   // $(this) is the container element
          $(this).show();
          $('#theiframe').load(function(){
             alert('loaded!');
          } 
....

動作しますが、IFRAMEが2回読み込まれます（アラートも2回表示されます）。

javascriptajaxjqueryiframe
48
Alex

可能であれば、iframeのドキュメント内でloadイベントを処理し、含まれているドキュメント内の関数を呼び出す方が良いでしょう。これには、すべてのブラウザで動作し、一度だけ実行されるという利点があります。

メインドキュメントで：

function iframeLoaded() {
    alert("Iframe loaded!");
}

Iframeドキュメントで：

window.onload = function() {
    parent.iframeLoaded();
}
54
Tim Down

iframe onloadイベント を使用します

$('#theiframe').on("load", function() {
    alert(1);
});
55
m-khonsari

ティムダウンの答え の線に沿ってjQuery（OPで言及）を活用し、含まれているページとiframeを疎結合すると、次のことができます。

Iframeで：

<script>
    $(function() {
        var w = window;
        if (w.frameElement != null
                && w.frameElement.nodeName === "IFRAME"
                && w.parent.jQuery) {
            w.parent.jQuery(w.parent.document).trigger('iframeready');
        }
    });
</script>

含むページで：

<script>
    function myHandler() {
        alert('iframe (almost) loaded');
    }
    $(document).on('iframeready', myHandler);
</script>

Iframeは（潜在的に存在する）親ウィンドウのドキュメントでイベントを発生させます-これを機能させるには、親ドキュメント自体のjQueryインスタンスが必要であることに注意してください。次に、親ウィンドウで、そのイベントに反応するハンドラーをアタッチします。

このソリューションには、含まれているページに予期されるロードハンドラーが含まれていない場合に破損しないという利点があります。より一般的に言えば、周囲の環境を知ることはiframeの関心事ではないはずです。

DOM readyイベントを活用してイベントを発生させていることに注意してください-これはほとんどのユースケースに適しているはずです。そうでない場合は、次のようにイベントトリガー行をウィンドウのロードイベントに添付するだけです。

$(window).on('load', function() { ... });
6
Oliver

これは私が見たのと同じ動作です。iframeのload()は空のiframeで最初に起動し、次にページが読み込まれると2回目に起動します。

編集：うーん、面白い。イベントハンドラでカウンタをインクリメントし、a）最初のloadイベントを無視するか、b）重複するloadイベントを無視できます。

3
Piskvor

Jqueryの Contents メソッドを使用して、iframeのコンテンツを取得できます。

2
suhair

より汎用的で独立したものにする場合は、Cookieを使用できます。 IframeコンテンツはCookieを設定できます。 jquery.cookieとタイマー（または、この場合はjavascriptタイマー）を使用すると、Cookieが1秒ごとに設定されているかどうかを確認できます。

//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
        cookieValue = $.cookie('iframeToken');  
        if (cookieValue == token)
        {
            window.clearInterval(iframeLoadCheckTimer );
            $.cookie('iframeToken', null, {
                expires: 1, 
                path: '/'
         });
        }
 }, 1000);
2
Bahadır Birsöz

Iframe +アニメーションのコードなし：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

function resizeIframe(obj) {

    jQuery(document).ready(function($) {

        $(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)

    });

}    
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >
2
Jérome Obbiet