javascript - 如何判断弹窗内容是否加载

标签 javascript

我需要为弹出窗口的父窗口设置一些 contextData 。我试试这个:

var some contextData = {};
$(function() {
    $('#clickme').click(function() {
        var w = window.open('http://jsfiddle.net');

        w.contextData = contextData            
        //w.context data is null in the popup after the page loads - seems to get overwritten/deleted
    });
});

它不起作用,所以我的下一个想法是,等待内容加载

var some contextData = {};
$(function() {
    $('#clickme').click(function() {
        var w = window.open('http://jsfiddle.net');
        w.onload = function() {
            //Never Fires
            w.contextData = contextData;

        }
    });
});

参见this fiddle 。我的 onload 方法永远不会触发。

这有效:

var some contextData = {};
    $(function() {
        $('#clickme').click(function() {
            var w = window.open('http://jsfiddle.net');
            setTimeout(function(){
                if(w.someVariableSetByThePageBeingLoaded) {
                    w.contextData = contextData;
                }
                else{
                    setTimeout(arguments.callee, 1);
                }

            }, 1);
        });
    });

但是有明显的优雅问题(但这是当前的解决办法)。

我知道你可以采用另一种方式(让弹出窗口回调到开启器/父级上的方法,但这迫使我保持​​某种查找上下文的方式(并且我必须将上下文的 key 传递给查询字符串中的弹出窗口)。当前的方法允许我捕获闭包中的上下文,使我的弹出窗口成为更可重用的代码。

我不想做这个跨域 - 父级和弹出窗口都在同一个域中,尽管父级是一个 iframe(很难用 jsfiddle 测试)。

建议?

最佳答案

如果您使用 iframe 执行此操作,请尝试这样做

HTML

<button id="clickme">Click Me</button>

<iframe id="framer"></iframe>

Javascript

$(function() {
    $('#clickme').click(function() {
        $("#framer").attr("src","http://jsfiddle.net");
        $("#framer")[0].onload = function(){
            alert('loaded');
        };
    });
});​

我更新了你的jsfiddle http://jsfiddle.net/HNvn3/2/

编辑 由于上面的内容是完全错误的,这可能会为您指明正确的方向,但需要在真实环境中进行尝试,看看是否有效。

应该设置全局变量frames,如果您

window.open("http://jsfiddle.net","child_window");

frames["child_window"] 可能引用另一个窗口

我在 jsfiddle 中尝试时遇到了 javascript 访问错误 - 所以这可能是正确的路径

编辑2

在我的本地开发盒上尝试我能够完成这项工作

var w = window.open("http://localhost");
w.window.onload = function(){
    alert("here");
};

alert() 发生在父窗口

关于javascript - 如何判断弹窗内容是否加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13426254/

相关文章:

javascript - 如何从 href 获取数据到字符串并在之后使用它

javascript - HTML5 重复列表 <ul> <li>

javascript - 读取cookie值,如果字符串的一部分=则触发函数

Javascript对象值相等测试?

HTML 中动态下拉菜单的 JavaScript onchange 事件

javascript - d3.js x 轴具体字符串刻度数

javascript - 使用 React 显示 HTML 格式的文本时出现不变冲突错误

javascript - 我需要这个下拉 php 代码来将人们重定向到 WordPress 中的特定分类法

javascript - 如何使用 Webpack 2 从 Marionette 3 应用程序中排除 lodash 的未使用部分

javascript - 使用 'nestjs/jwt' 签名动态/用户相关的 secret