How to cause an IFrame link to open into a new window?

Question

I have a website which is built using WP and uses SSL. On one of the page on my website, I have added an iframe call to another http website.

Here is my iframe call:

<div class="embed-responsive embed-responsive-16by9">
<iframe src="//childwebsite.com/" target="_blank"></iframe>
</div>

The iframe is displayed properly. Now when you click on anything inside the iframe, Chrome displays a message saying

Mixed Content: The page at ' https://parentwebsite.com ' was loaded over HTTPS, but requested an insecure resource ' http://childwebsite.com '. This request has been blocked; the content must be served over HTTPS.

What I am looking for is when a user clicks inside an iframe, open a new tab in the browser and let the user be redirected to a particular on the childwebsite.

I tried adding target="_blank" to the iframe but it did not work.

I added the following JS also but it did not work

//pass the iframe to this iframe getting function 
function iframeRef( frameRef ) {
    return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('smugmugGallery') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
    links[i].setAttribute('target','_blank');
}

Any help will be appreciated.

Answer 1

You have two issues here. An SSL issue, and a cross domain issue.

1. Your SSL issue can only be solved by serving the iframed content via SSL or serving the parent page via non-SSL. This will remove the security alerts you are seeing.

2. You cannot assert control over iframed content if it comes from another domain, well at least not easily for cross browser purposes.

From the Mozilla dev site:

Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting

Answer 2

Use base tag in iframe and try once.

<base target="_blank" />

you can see more about Base tag here