0

I need to hide some buttons in a parent window while opening modal by clicking image inside an iframe.

Following is my code -

in parent window -

<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";

in iframe -

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

I have tried so many ways but nothing works. Please help.. Thanks in advance!

Namil Zen
  • 1
  • 3

1 Answers1

0

First, add this function to the parent window 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";
  });
}

Add a load handler to your iframe:

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

Clicking on the iframe image hides the buttons in the parent:

enter image description here

Andy Hoffman
  • 15,329
  • 3
  • 30
  • 51
  • it worked perfectly in firefox and edge. but not working in chrome..please help – Namil Zen Feb 20 '19 at 08:39
  • @NamilZen For Chrome, you'll need to test things on a live server (`localhost` is fine, too). If you try to run things on, say, the OS filesystem, you'll get this error in Chrome: `Blocked a frame with origin "null" from accessing a cross-origin frame.` – Andy Hoffman Feb 20 '19 at 09:48
  • @NamilZen If you're curious to learn more about same-origin policy restrictions please refer [here](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame?rq=1). – Andy Hoffman Feb 20 '19 at 09:57