document.ready 和 iframe答案

【问题标题】：document.ready and iframesdocument.ready 和 iframe
【发布时间】：2014-10-23 22:44:10
【问题描述】：

我的页面加载了一个 iframe。 iframe 包含一个小标记，包括“点击”

我有一个 js 文件，包括它控制按钮的点击事件。目前，JS 文件包含在我的 iframe 加载的小页面中。

我想在包含页面级别包含我的 javascript 库，而不是在 iframe 加载的页面中。所以，我移动了它。那些知道你的东西的人，听到后不会感到惊讶当我这样做时，click() 事件停止触发。

                    $(document).ready(function(){

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

                    });

我大致理解，这是因为 .ready 函数在 iframe 加载之前遍历 DOM……但我不知道该怎么做。有什么帮助吗？

【问题讨论】：

一个 iframe 有不同的窗口上下文。听起来您了解same origin policy，这很好。不幸的是，jQuery 不是为跨窗口上下文工作而设计的。当 iframe 命中 document.ready 时让侦听器触发要复杂得多。

标签： javascript jquery html iframe

【解决方案1】：

如果您想确保在运行代码之前加载所有内容、图像、iframe 等（不仅仅是准备好 DOM），您可以使用 jQuery 的 .load() 而不是 $(document).ready(function(){});:

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

【讨论】：

应该在第一篇文章中提到，我已经尝试过 window.load() 相同的问题。还有其他建议吗？
没有window.load()，只有$(window).load()和window.onload

【解决方案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>

【讨论】：

哇，谢谢，我自己也没有想到。但是，我继续进行预超文本处理 iframe。毕竟我在 PHP 中工作。我想我在浏览器中留下了太多的机会。我只是用 php“包含一次”替换了 iframe

【解决方案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.("load"... 技术我从其他人那里学到的关于交换图像的技术。所以我在这里将它与我的 iframe 脚本结合起来。它对我有用。希望这样做是正确的，没有人会这样做否决我这个...

【讨论】：