【问题标题】：How to access parent window which contains modal from iframe which opens in that modal如何从以该模式打开的 iframe 访问包含模式的父窗口
【发布时间】：2013-04-18 08:28:28
【问题描述】：

我有一个名为 parent.html 的 html 页面，其中包含 Bootstrap 手风琴。通过单击手风琴上的链接，它会调用另一个页面 search.html 并在模式上打开 iframe。

search.html 有一个“完成”按钮，其功能是关闭模式，在手风琴上发布数据，手风琴应该保持打开状态。

我试过 .opener()。它似乎没有用。有什么指点吗？？

parent.html

购买花店寻找花店

$(function () {
    $("*[data-modal]").click(function (e) {
        e.preventDefault();
        var href = $(this).attr('href');
        if (href.indexOf('#') != 0) {
            $('<div id="searchBox" class="modal bigModal" data-backdrop="static"><div class="searchModal-header gutter10-lr"><button type="button" onclick="window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">×</button></div><div class=""><iframe id="search" src="' + href + '" class="searchModal-body"></iframe></div></div>').modal();
        }
    });
});

search.html

<!DOCTYPE html>
<html lang="en">
<head>
<head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
</head>
<body id="detail">
<form class="form-horizontal" id="frmdetail" name="frmdetail" action="preferences"  method="POST">
<div class="row-fluid gutter10-tb border-t">
   <a class="btn btn-primary my-list" href="#">Finish</a>
</div>
</form>
</div>
<script type="text/javascript">
    $(document).ready(function(){

        if (top === window) {
            alert("this page is not in an iframe");
        } else {
            alert ("Im here");
            $('.my-list').click(function(){
                alert("Im clicked");
            $('.modal', opener.document).dialog('close');
        });
        }
    });
</script> 
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您可以尝试使用 postMessage： http://en.wikipedia.org/wiki/Cross-document_messaging https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

您应该从 search.html 向主页发送命令，让主页处理收到消息的事件。

你会在上面的链接中找到你需要的东西

示例（父页面）：

window.onmessage = function(e){
    //Here is the data that you receive from search.html
    var DataReceived = e.data;
    var OriginUrl = e.origin;

    //Do what you want when the message is received
};

示例（search.html）：

function buttonClick() {
    var curDomain = location.protocol + '//' + location.host; //This will be received as e.origin (see above)
    var commandString = "Hello parent page!"; //This will be received as e.data
    parent.postMessage(commandString,curDomain); //Sends message to parent frame
}

父页面中的 windows.onmessage 应该在页面加载时“启动”。 'buttonClick()' 函数可以在您想向父页面发送消息的时间和地点被调用，父页面将执行一些东西（在这种情况下是手风琴的东西）

编辑：关闭模式试试这种方式：

家长：

window.onmessage = function(e){
    //Here is the data that you receive from search.html
    var DataReceived = e.data;
    var OriginUrl = e.origin;
    if (e.data == 'close') {
        $(this).modal('hide'); //Example code, you can run what you want
    }
};

搜索：

function buttonClick() {
    var curDomain = location.protocol + '//' + location.host; //This will be received as e.origin (see above)
    var commandString = "close"; //This will be received as e.data
    parent.postMessage(commandString,curDomain); //Sends message to parent frame
}

在这种情况下，您将消息“关闭”发送到父框架。当父母收到消息时，他检查它是否“关闭”，然后运行您想要的代码（在这种情况下，您使用 $(".modal").dialog('close')) 关闭您的模式

【讨论】：

所以如果我必须在父窗口上关闭模式，我是否必须在子 html 页面中： parent.postmessage(modal.('close'), curDomain;
检查新示例！请记住，您发送带有数据的消息（在本例中为“关闭”），并且当父级收到此消息时，您可以运行所需的所有代码。您还可以设置“关闭”以外的更多命令。
dragonfly.zymichost.com/exchangeux/personal/parent.html - 无法让它工作..我错过了什么？？
脚本有效，您只需替换 $(".modal").dialog('close');与 $('.modal').modal('hide');它会起作用的！