Open iframe source in new tab

Question

I've got an iframe that people can navigate through to get to a specific place, but as it is cross-domain some of the javascript on the site doesn't work (Such as looking at product history for example...)

I've been trying to find a way to make a button that will take whatever page the user is on in the iframe and open that link in a new tab.

While trying to research if this was possible, all I could find is people opening links from within an iframe in a new tab, which is not what I need.

I need to make a button that onclick will open a new tab with whatever link the user is currently on in the iframe.

I haven't really tried many things because I cannot find anything on the subject (Probably due to terrible wording), but I'm thinking my best chance is jquery/javascript, however, I'm not very fluent in javascript.

So my question is, is it possible to open an iframes url into a new tab, and if so, what would be the most efficient way to do so?

The website that is in my iframe is cross-domain and I cannot edit its source.

What I currently have is this:

<iframe id="iframe" class="frame" name="iframe" height="100%" width="100%" onload="refreshLink(this.contentWindow.location.href)"></iframe>

Note: The src is set by javascript on page load.

Under that I have:

                                <script>
                                var hyperLink = document.getElementById("iframe").src;

                                function refreshLink(link) {
                                    hyperLink = link;
                                    document.getElementById("button").href=hyperLink;
                                }
                                </script>

Above all of that I have:

<a href="#" target="_blank" class="btn btn-info" id="button">Open in R1</a>

But, when I click the button at any given time it opens a new tab to the same url I was at before (a tab that goes to the same page the iframe is displayed on).

Answer 1

I believe this should be possible

For iframes displaying the same domain content you can get the current site url with something like this:

document.getElementById("myframeID").contentWindow.location.href

But for cross-domain iframes you will get the following error when trying to get the location on the site the same way:

VM2536:2 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.

However this seems to work to get proper URL from cross-domain iframes

document.getElementById('myframeID').src

To finish off you could do something like this (assuming you use jQuery by your tags):

$('body').on('click','#button', function(){
   var url = document.getElementById('myframeID').src;
   var tabOrWindow = window.open(url, '_blank');
   tabOrWindow.focus();
 });

Answer 2

Here's a starter. With markup like this:

<iframe id="myIframe" src="http://yourwebsite.com"></iframe>
<a href="#" target="_blank" id="button">Click here</a>

Start with some JS that changes the anchor's href to the src of your iframe:

var hyperLink = document.getElementById("myIframe").src;
document.getElementById("button").href=hyperLink;

Add an onload attribute to your iframe:

<iframe id="myIframe" src="http://yourwebsite.com" onload="refreshLink(this.contentWindow.location.href)">
</iframe>

The line onload="refreshLink(this.contentWindow.location.href)" fetches the current URL of the iframe where the user's been navigating and sends it as an argument for the function refreshLink.

Then we can declare that function, and the full JS code would look like this:

var hyperLink = document.getElementById("myIframe").src;

function refreshLink(link) {
    hyperLink = link;
    document.getElementById("button").href=hyperLink;
}

This works, but it's subject to whatever policies each website has regarding iframes and http/https.