How To Get The iFrame Source From The Page Inside The iFrame With Javascript

Occasionally, the need arises to figure out the value of the “src” attribute of the iframe from the page that is inside the iframe. For one, being able to access this value allows you to pass parameters from the parent page to the iframed page. In another instance, you might want a way to find out if page on your website is being iframed onto someone else’s website. I can illustrate two ways to get the parent iframe’s source, depending on whether the page inside the iframe is on the same domain as the page that contains the iframe.

To keep things simple, I will call the page inside the iframe the “child” page, and the page that contains the iframe the “parent” page.

If the child page is on the same domain as the parent page, then you can use the getElementByID method. Add this script to the child page:

<script> var myParentSrc = parent.document.getElementById('myParentIframe').src; alert(myParentSrc); </script>

Change the id of the parent iframe to your iframe’s id, and when you load the parent page in a browser, you will get an alert telling you the source of the iframe.

To pass a variable to the child page from the parent page, you just add it onto the source in the parent page, and grab it on the child page.

The iframe code on the parent page would look like this:

<iframe frameborder="1" width="300" height="300" src="http://www.mywebsite.com/child.html?testing" id=" myParentIframe"></iframe>

Note the “?testing” after the child.html. Tacking this on at the end doesn’t bother the browser at all. The script on the child page would be modified to find the string of text after the question mark, like this:

<script>
var myParentSrc = parent.document.getElementById(‘myParentIframe’).src;
var myParamLocation = myParentSrc.indexOf("?", 0);
var myParam = myParentSrc.slice(myParamLocation +1);
alert(myParam);
</script>

Then you can do whatever you need to do with the parameter you just passed into your iframe.

If the child page is not on the same domain as the parent page, then you’ll get an error:

Firefox error: Permission denied for [child URL] to get property Window.document from [parent url]
IE : Access is denied.

So we need another way to figure out the source that doesn’t send the browser into a tizzy.

Apparently, the child page inside an iframe thinks the source of its parent iframe is its location or URL. So you can use the handy dandy javascript location.search.substring function to get the parent iFrame source. Who’d have thunk?

Put this script on your child page:

<script>
alert(location.search.substring(1))
</script>

And it will show you everything after the question mark in your iframe source.

From there, you only need to manipulate the string to get whatever values you need to pass to the child page.

Happy scripting!