I am working on a react application, which has a maps page. To view maps I am using an iframe tag, this iframe tag has some anchor tags and buttons below the map div, these anchor tags have target="_blank". I do not want this new tab to open.

I have tried to access this anchor tag but am unable to access it due to same-origin policy in browsers. I have tried to give the parent div of iframe, style, pointer-events:none but that also blocks the buttons that must be clickable.

My requirement is just to block anchor tags from opening a new tab from this page, just to clarify there are anchor tags outside the iframe but they are redirecting to pages in this application and should not be blocked (these do not open new tabs).

The best way is just to access the anchor tags using id/class selector but due to them being in a cross origin iframe that is no longer an option. Even if the anchor tags are not disabled but just the new tabs are blocked from opening, that too is fine, but I am unable to implement this. Any help is much appreciated.

Edit: Here is a jsfiddle for demonstration: https://jsfiddle.net/ilikeubuntumorethanwindows/u7c29rpm/7/

<div class="a">
 <div class="b">
  <iframe src="https://www.tutorialrepublic.com/html-tutorial/html-iframes.php" frameborder="0" width="500px" height="500px"></iframe>
 </div>
 <br>
 <br>
 <a href="https://www.tutorialrepublic.com/html-tutorial/html-iframes.php" target="_self">Some text her</a>
 <button>Button</button>
</div>

In this fiddle I have an iframe tag. Inside the iframe tag is an anchor tag with text try this code, if we click on that tag a new tag opens up. I do not want this tab to open up. I want to disable this anchor tag if possible, if not my requirement is that the new tab does not open at all and the anchor tag does nothing. I hope that my question is more clear now.