jQuery div从iframe内的文件加载

Question

我有一个div，里面有一个iframe ， iframe从URL加载文件，并且在此文件中显示一些内容。 我的问题是； 是否有可能从iframe本身的文件中关闭div。

 <div id="container"> <iframe src="mydomain.com/index.php"></iframe> </div> 

我知道最简单的方法是使用jQuery关闭div，但是由于某些原因，我需要关闭iframe的文件加载，因为当会话在iframe重定向时，需要关闭名为.container的div。

我的问题是，是否可以从mydomain.com/index.php插入一些代码来关闭或隐藏名为.container的div。

Answer 1

由于它们在同一个域中，因此您可以使用window.parent访问父窗口

然后执行以下操作：

var cont = window.parent.document.getElementById('container');
cont.style.display='none';

演示

Answer 2

您可以使用window.postMessage在子窗口（iframe）和父窗口之间进行通信。

在iframe中，您可以具有以下功能；

function closeDivOfParent() {
    parent.postMessage("close-div","*");
}

在父页面中，您会听到这些消息；

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent, function(e) {

    var key = e.message ? "message" : "data";
    var message = e[key];

    if(message === "close-div") {
        $('div').hide();
    }

}, false);

代码的道具和解释在； https://davidwalsh.name/window-iframe