Javascript怎么获取iframe中字文档的元素

Question

如题

在a.html中有如下iframe，初始display属性为none，并通过js实现点击切换display属性为block。

<div id="commodity_wrapper" class="iframe-wrapper" style="display: none">
  <iframe src="commodity_manage.html" ></iframe>
</div>

现在我想在b.html中通过id获取这个div，并实现点击将display再次设置为none。

我在网上查到的window.parent和window.opener貌似都不起作用。

目前不能实现功能的代码如下：

function toggle_invisible(id){
    let ele = window.parent.document.getElementById(id);
    ele.style.display = "none";
}

请问是我对这两个方法的用法有误，还是我应该用别的方法呢？

Answer 1

 

//iframe向主页面传递事件//iframe页面
window.parent.postMessage({refresh:'id'},'*');

//主页面
window.addEventListener('message',function(event){
     if(event.data.refresh){　　　　//此处执行事件
    }
})

使用这种方式