скрывать элемент в родительском окне при нажатии на изображение внутри фрейма

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Изображение скрывает кнопки в родительском элементе: