Question

我有一个包含iframe的div，这个iframe会加载一个显示页面的网址。

在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>

在iframe src视图中，我加载了一个使用jquery

的js

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

无论如何要做到这一点？

Answer 1

尝试这样的事情：

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

或类似的东西：

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

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

Answer 2

你可以使用：

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

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

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

Answer 3

这可以通过子到父框架消息传递来完成。

让父框架监听消息。

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

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

子框架可以向父框架发送消息。

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

请参阅我的要点：https://gist.github.com/sfarthin/9140403

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

Answer 4

根据您的代码，根据您的代码，我认为您的iframe来自不同的域，因此来自不同域的框架无法访问父页面。

因此，您可以考虑使用nodejs，或者您应该阅读：Cross domain iframe issue或使用“crossdomain iframe”搜索关键字可以引导您获得所需内容。

隐藏包含iframe的div

4 个答案: