parent.html

Question

我有一个名为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>

Answer 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”）关闭你的模态。对话框（'close'））

如何访问包含iframe的父窗口，该窗口在该模式中打开

parent.html

search.html

1 个答案: