document.ready和iframes

Question

我的頁面加載了iframe。 iframe包含一個小標記，包括“Click”

我有一個js文件，包含它控制按鈕的點擊事件。 目前，JS文件包含在我的iframe加載的小頁面中。

我想在包含頁面級別包含我的javascript庫，而不是在iframe加載的頁面中。 所以，我感動了它。 那些了解你的東西的人，聽到我這樣做時，click（）事件停止了，我不會感到驚訝。

                    $(document).ready(function(){

                          $('#filter_button').click(function(){
                                    //operations
                            });

                    });

我松散地理解，這是因為.ready函數在iframe加載之前遍歷DOM ...但我不知道如何處理它。 有幫助嗎？

Answer 1

如果你想在運行代碼之前確保加載所有內容，圖像，iframe等（不僅僅是DOM准備好了），你可以使用jQuery的.load（）而不是$(document).ready(function(){}); ：

$(window).load(function () {
  // run code
});

Answer 2

嘗試使用帶有回調的jQuery load（）方法，在加載完成后加載頁面上的事件。

將path_to_page.html替換為您當前的iframe網址：

$(document).ready(function(){
    $('#loadedContent').load('path_to_page.html', function() {
        $('#filter_button').click(function(){ 
        //operations 
        }); 
    });
});

用以下內容替換你的iframe：

<div id="loadedContent"></div>

Answer 3

我在我的主頁上執行了此操作，其中設置了iframe attr（）：

$("#my_iframe") .attr( "src", template ) // template is the iframe content path
                .one( "load", function() {

                    $("#my_iframe")[0].contentWindow.$('body').trigger('contentReady');

                } ).each( function() {
                    if( this.complete ) //trigger load if cached in certain browsers
                        $(this).trigger("load");
                } );

然后以這種方式將我的代碼放在iframe中：

$(window).on( "contentReady", function(e) {
    // code I usually initiate with document ready
} );

我不是一個JavaScript專家。 attr（）... on。（“加載”......我從其他人那里學到了交換圖像的技術。所以我把它與我的iframe腳本結合起來。它對我有用。希望這是正確的，沒人會我為此投票給我......