Disable or overlay link inside Iframe-CodePudding

var iframe = document.querySelector('#iframe');
iframe.setAttribute('src', 'https://datastudio.google.com/embed/reporting/20db63b8-999b-4f26-8819-b3f11e034535/page/VgD');

iframe {
  width: 400px;
  height: 400px;
  resize: both;
  /* pointer-events: none; */
}

<html>
 <body>
  <iframe id="iframe" src=""></iframe>
  <script src="main.js"></script>
 </body>
</html>

How to hide URL and make it unable to open this report from iframe dialog. Is it possible to hide or overlay with dev particular button("Google Studio danych") and make it unclickable?

Please check here:

CodePudding user response：

I'm not sure, but you can try it =>

var iframe = document.querySelector('#iframe'); 
iframe.setAttribute('src', 'https://datastudio.google.com/embed/reporting/20db63b8-999b-4f26-8819-b3f11e034535/page/VgD');

.parent {
  position: relative;
  height: 400px; 
  width: 400px; 
}

.overlay {
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 24px;
  width: 100%
}


iframe { 
  height: 100%;
  resize: both;
  width: 100%;
}

<html> 
  <body> 
    <div >
      <iframe id="iframe" src=""></iframe>
      <div ></div>
    </div>
      <script src="main.js"></script> 
    </body> 
</html>