在iframe中单击图像时，在父窗口中隐藏元素

Question

在通过单击iframe中的图像打开模式时，我需要在父窗口中隐藏一些按钮。

以下是我的代码-

在父窗口中-

<iframe id="gallery" src="links/gallery.html" width="100%" frameborder="0" style="min-height: 100vh;
  max-height: 999px;></iframe>

<div id="max" class="abtbtn">
  <button><span class="fas fa-chevron-up"></span></button>
  <button><span class="fas fa-chevron-down"></span></button>
</div>

javascript：

var iframe = document.getElementById('gallery').contentWindow.find('img');
iframe.click.document.getElementById("max").style.display = "none";

在iframe中-

<img id="portfolio" src="images/portfolios/web/4.jpg" data-toggle="modal" data-target=".portfolio1" alt="" />

我尝试了很多方法，但是没有任何效果。请帮助。.预先感谢！

Answer 1

首先，将此功能添加到父窗口JavaScript：

function bindClick() {
  var iframe = document.getElementById("gallery");
  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  innerDoc.getElementById("portfolio").addEventListener("click", function () {
    window.parent.document.getElementById("max").style.display = "none";
  });
}

将加载处理程序添加到您的iframe：

<iframe onload="bindClick()" id="gallery" src="links/gallery.html" ... >

点击iframe图片会隐藏父级按钮：