document.ready и iframes

Question

Моя страница загружает фрейм.Элемент iframe содержит небольшую разметку, в том числе «Click»

У меня есть файл js, в том числе он управляет событием click для кнопки.В настоящее время файл JS включен в небольшую страницу, которую загружает мой iframe.

Я хочу включить свою библиотеку javascript на уровне содержащей страницы, а не на страницу, которую загружает iframe.Итак, я перенес это.Те из вас, кто знает ваши вещи, не удивятся, узнав, что когда я это сделал, событие click () перестало срабатывать.

                    $(document).ready(function(){

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

                    });

Я свободно понимаю, что это потому, что функция .readyобход DOM до загрузки iframe ... но я не знаю, что с этим делать.Любая помощь?

Answer 1

Попробуйте метод load () jQuery с обратным вызовом, чтобы подключить события на загруженной странице после того, как она закончит загрузку.

Замена path_to_page.html вашим текущим URL-адресом iframe:

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

Замените ваш iframe следующим:

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

Answer 2

Если вы хотите убедиться, что весь контент загружен, изображения, iframes и т. Д. (А не только DOM готов) перед запуском кода, вы можете использовать jQuery .load () вместо $(document).ready(function(){});:

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

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. И это работает для меня. Надеюсь, что это правильно, и никто не будетпроголосуй за меня ...