Get current URL from IFRAME

Javascript Problem Overview

Is there a simple way to get the current URL from an iframe?

The viewer would going through multiple sites. I'm guessing I would be using something in javascript.

Javascript Solutions

Solution 1 - Javascript

For security reasons, you can only get the url for as long as the contents of the iframe, and the referencing javascript, are served from the same domain. As long as that is true, something like this will work:

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

If the two domains are mismatched, you'll run into cross site reference scripting security restrictions.

Solution 2 - Javascript

If your iframe is from another domain, (cross domain), the other answers are not going to help you... you will simply need to use this:

var currentUrl = document.referrer;

and - here you've got the main url!

Solution 3 - Javascript

If you are in the iframe context,

you could do

const currentIframeHref = new URL(document.location.href);
const urlOrigin = currentIframeHref.origin;
const urlFilePath = decodeURIComponent(currentIframeHref.pathname);

If you are in the parent window/frame, then you can use https://stackoverflow.com/a/938195/2305243 's answer, which is

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

Solution 4 - Javascript

Hope this will help some how in your case, I suffered with the exact same problem, and just used localstorage to share the data between parent window and iframe. So in parent window you can:

localStorage.setItem("url", myUrl);

And in code where iframe source is just get this data from localstorage:

localStorage.getItem('url');

Saved me a lot of time. As far as i can see the only condition is access to the parent page code. Hope this will help someone.

Solution 5 - Javascript

I had an issue with blob url hrefs. So, with a reference to the iframe, I just produced an url from the iframe's src attribute:

    const iframeReference = document.getElementById("iframe_id");
    const iframeUrl = iframeReference ? new URL(iframeReference.src) : undefined;
    if (iframeUrl) {
        console.log("Voila: " + iframeUrl);
    } else {
        console.warn("iframe with id iframe_id not found");
    }

Solution 6 - Javascript

If you're inside an iframe that don't have cross domain src, or src is empty:

Then:

function getOriginUrl() {
    var href = document.location.href;
    var referrer = document.referrer;
    // Check if window.frameElement not null
    if(window.frameElement) {
        href = window.frameElement.ownerDocument.location.href;
        // This one will be origin
        if(window.frameElement.ownerDocument.referrer != "") {
            referrer = window.frameElement.ownerDocument.referrer;
        }
    }
    // Compare if href not equal to referrer
    if(href != referrer) {
        // Take referrer as origin
        return referrer;
    } else {
        // Take href
        return href
    }
}

If you're inside an iframe with cross domain src:

Then:

function getOriginUrl() {
    var href = document.location.href;
    var referrer = document.referrer;
    // Detect if you're inside an iframe
    if(window.parent != window) {
        // Take referrer as origin
        return referrer;
    } else {
        // Take href
        return href;
    }
}

Solution 7 - Javascript

I've been trying to retrieve the full URL from the inside of the shopify google analytics additional script iframe. document.refferer shows only hostname without search params. But I found another property that worked for me document.baseURI

Solution 8 - Javascript

Some additional information for anyone who might be struggling with this:

You'll be getting null values if you're trying to get URL from iframe before it's loaded. I solved this problem by creating the whole iframe in javascript and getting the values I needed with the onLoad function:

var iframe = document.createElement('iframe');
iframe.onload = function() {

	//some custom settings
	this.width=screen.width;this.height=screen.height; this.passing=0; this.frameBorder="0";

	var href = iframe.contentWindow.location.href;
	var origin = iframe.contentWindow.location.origin;
	var url = iframe.contentWindow.location.url;
	var path = iframe.contentWindow.location.pathname;

	console.log("href: ", href)
	console.log("origin: ", origin)
	console.log("path: ", path)
	console.log("url: ", url)
};

iframe.src = 'http://localhost/folder/index.html';

document.body.appendChild(iframe);

Because of the same-origin policy, I had problems when accessing "cross origin" frames - I solved that by running a webserver locally instead of running all the files directly from my disk. In order for all of this to work, you need to be accessing the iframe with the same protocol, hostname and port as the origin. Not sure which of these was/were missing when running all files from my disk.

Also, more on location objects: https://www.w3schools.com/JSREF/obj_location.asp

Content Type	Original Author	Original Content on Stackoverflow
Question	chris	View Question on Stackoverflow
Solution 1 - Javascript	kkyy	View Answer on Stackoverflow
Solution 2 - Javascript	ParPar	View Answer on Stackoverflow
Solution 3 - Javascript	Alan Dong	View Answer on Stackoverflow
Solution 4 - Javascript	Beny	View Answer on Stackoverflow
Solution 5 - Javascript	Rob	View Answer on Stackoverflow
Solution 6 - Javascript	Basil Goldman	View Answer on Stackoverflow
Solution 7 - Javascript	Crashh	View Answer on Stackoverflow
Solution 8 - Javascript	GChuf	View Answer on Stackoverflow