Question

我正在使用Javascript点击按钮动态创建一个iframe并在弹出窗口中显示它。
在iframe我正在加载另一个网站（不同的域名），该网站由用户从第一步到最后一步的表单序列组成。
当用户在最后一步时，他将被关闭Iframe中的按钮。
我想点击关闭按钮关闭（隐藏）包含Iframe的弹出窗口可能吗？请帮忙。

Answer 1

在网上浏览寻找解决方案数小时之后，我遇到了这种情绪这里的问题是同源策略阻止脚本访问具有其他来源的站点内容。实际上，origin包含以下部分。

origin:<protocol(http/https)>://<hostname>:<port number>/path/to/page.html

如果协议，主机名和端口号不相同，则原点被视为不同。在这种情况下，您无法访问由于同源安全政策，来自其他网站的一个网站的内容。

为了克服它，您必须使用 window.postMessage（） 父子沟通。
仅供参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage（）方法可安全地启用跨源通信假设您的父网站是 example-parent.com ，并在Iframe中加载网站 example-iframe.com 并让两者都使用 http 协议。以下是我解决问题的方法在父网站中，为要接收的消息添加事件监听器，如下所示。

window.addEventListener('message',receiveMessage,false);

function receiveMessage(event){
    var origin = event.origin || event.originalEvent.origin;
    if(origin.indexOf('http://example-iframe.com')>=0) // check if message received from intended sender
    {
        if(event.data=="intended message format") // check if data received is in correct format
        {
            // call functionality that closes popup containing iframe
        }else{ // data received is malacious
            return;
        }

    }else{  // message is not received from intended sender
        return;
    }
}

从iframe发布消息到父网站如下发布消息语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

function sendMessage(){
  parent.postMessage('intended message format','http://example-parent.com');
}

正确使用 postMessage（），否则可能会导致跨站点脚本攻击。

Answer 2

正如我所理解的那样，您想要从子（iframe中的关闭按钮）调用一个关闭iframe的函数。你可以通过调用父

来做到这一点

parent.myfunction() //call myfunction from parent

在父代码中，您必须实现结束逻辑

   myfunction() {
     iframe.hide() //or whatever
   }

点击Iframe按钮，关闭包含iframe的Popup

2 个答案: