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

I'm Creating a Iframe dynamically on click of button using Javascript and displaying it in popup.
In the Iframe I'm loading another website(different domain) which consists of sequence of forms which takes user from first step to last step.
When the user is in last step he would be given a close button within the Iframe.
I want to close(hide) the popup containing Iframe on click of close button.
Is it Possible?Please help.

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

2 个解决方案

#1

After hours of surfing the Web for finding solution I came across this soultion.
The Problem here is that the same-origin policy blocks scripts from accessing contents of site with other origin.
Actually origin consists of the following parts.

经过几个小时的网上冲浪寻找解决方案后,我遇到了这种情绪。这里的问题是同源策略阻止脚本访问具有其他来源的站点内容。实际上,起源由以下部分组成。

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

The origin is considered to be different if protocol,hostname and port number are not same.In such cases you can not access the contents of one website from other website due to same-origin security policy.

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

In order to overcome it you have to use parent-child communication using window.postMessage().
FYI : https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage.
The Window.postMessage() method safely enables cross-origin communication.
Suppose that your parent website is example-parent.com and In Iframe your loading website example-iframe.com and let both are using http protocol. Below is how I solved the problem.
In parent website add event listener for messages to receive as follows.

为了克服它,你必须使用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;
    }
}

From Iframe post message to the parent website as follows.
Post message syntax : otherWindow.postMessage(message, targetOrigin, [transfer]);

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

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

Use postMessage() properly,otherwise it may lead to cross-site scripting attack.

正确使用postMessage(),否则可能导致跨站点脚本攻击。

#2

As i understood correctly you want to call a function from child (close button in iframe) which closes the iframe. You can do this by call the parent

正如我所理解的那样,你想从子(iframe中的关闭按钮)调用一个关闭iframe的函数。您可以通过致电父母来完成此操作

parent.myfunction() //call myfunction from parent

And in parent code you have to implement closing logic

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

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

#1

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