Question

我是网络编码的新手，请原谅我，如果这是一个愚蠢的问题/尴尬的措辞。

我正在尝试在子页面中进行对话以弹出将iframe限制在父页面中（托管iframe）。因此，模态的结果将与父页面上的元素重叠。

我已经尝试了$（'。modalwindow'）。appendTo：$（window.parent.document）.find（'body'），它无效。

到目前为止，这是我所拥有的，它似乎也没有用。 child.html：

    <div class="wrapper">
        <button class="btn">Open Me</button>
        <div class="modalwindow">
            <iframe id="apple" src""></iframe>
        </div>
    </div>
    <script> 
        $(".modalwindow").dialog({
            autoOpen: false,
            modal: true,
            closeText: "",
            closeOnEscape: true,
            width: 500,
            height: 600,
            //dialogClass: "no-close",
            //dialogClass: "theme",
            //zIndex: $.maxZIndex()+ 1,
            open: function(ev, ui){
             $('#apple').attr('src','http://www.nytimes.com');}
        });
        $('.btn').click(function(){
            $('.modalwindow').dialog('open');
        });
$(".modalwindow").appendTo: $(top.document.body); // Not working, and messes up dialog. 
</script>

Answer 1

这很可能是一个跨域JavaScript问题。以下是三种可能的情况：

主页和嵌套页面的域一致 - 您可以访问其他页面的内容，甚至可以从子页面初始化主页中的弹出窗口（但这显然不是这样）工作）。
主机页面和嵌套页面的域不同，但您可以访问这两个域。你可以使用这个https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage?redirectlocale=en-US&redirectslug=DOM%2Fwindow.postMessage或尝试使用像这样的http://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro这样的JS库通过使用上述方法，您将不得不创建两个脚本，一个用于主页，一个用于子页。子页脚本将要求主页页脚本实际显示弹出窗口。主机页面脚本将完成这项工作。当弹出窗口关闭时，主机页面脚本可以发送事件或执行回调函数来通知子页面有关更改的信息。
域名不同，您无法访问其中一个域名。对不起，这是最糟糕的情况。由于安全原因，您无法在此处解决问题。

更新：关于案例1和案例2，此库可以包装所有魔法http://benalman.com/projects/jquery-postmessage-plugin/并提供跨浏览器解决方案。

如何让一个模态窗口弹出iframe？

1 个答案: