Javascript 隐藏包含iframe的div

我有一个包含iframe的div，这个iframe加载一个显示页面的URL

在iframe中，我有一个关闭按钮，单击该按钮时会隐藏div。但是我无法从iframe中访问div

我的代码如下

<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
  <div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
    <a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
    <iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
    </iframe>
  </div>
</div>

---

无论如何都要这样做吗？

试试这样的方法：

$('#divtohide', window.parent.document).hide();

$("#InFrameId").on('click', function() {
    $('#divtohide', window.parent.document).hide();
});

或者像这样：

$('#divtohide', window.parent.document).hide();

$("#InFrameId").on('click', function() {
    $('#divtohide', window.parent.document).hide();
});

编辑：根据您问题的最新更新，如果框架来自不同的域，浏览器会将其标记为XSS，您可能无法完成很多工作。运行脚本的一种方法是，如果iframe的服务器配置为发送具有正确值的X-XSS-Protection标头。

您可以使用：

$('#modalContainer', window.parent.document);

第二个参数是要搜索的上下文

$(document).on('click','.close',function(){
  $('.app', window.parent.document).remove();
});

---

简单地说，你们不能，根据你们的代码，我认为你们的iframe来自不同的域，所以一个来自不同域的框架不能访问父页面

---

因此，您可以考虑使用NoDEJs，或者，您应该阅读以下内容：或者使用“交叉域iFrAMEY”关键字进行搜索将引导您找到所需的内容。

< P>这可以通过子到父帧消息传递来完成。 让父帧侦听消息

<div id="myDiv">
    <iframe src="childFrame.html" id="frame1"></iframe>
</div>

<script>    
window.onmessage = function(e) {
     if(e.data == "close") $("#myDiv").toggle();
}
</script>

window.onmessage=函数（e）{
如果（e.data==“close”）$（“#myDiv”）.toggle（）；
}

子帧可以向父帧发送消息

<button onclick="parent.postMessage('close', '*');">Hide</button>

隐藏

见我的要点：

---

DhruvJoshi的方法将在浏览器中将此标记为XSS攻击。

iframe源是来自同一个域还是不同的域

$（文档）。最接近的（'.app'）

文档没有AnteStore如果两个页面位于同一个域上，则任何js代码都可以工作，否则无法执行此操作。iframe源来自不同的域