javascript - iframe onload event

Question

I've a simple piece of code:

<script>
function change(){document.getElementById("browse").src = document.getElementById("addr").value;}
function update(){document.getElementById("addr").value = document.getElementById("browse").src;}
<script>
<input type="text" id="addr"><input type="button" value="Go" onclick="change();">
<iframe id="browse" style="width:100%;height:100%" onload="update();"></iframe>

update(); is not called when e.g. link inside the iframe was clicked and new page loaded.

What's the problem?

Answer 1

Short answer: You can't get the URL of pages on any domain other than yours. The URL you want can be gotten with:

document.getElementById("browse").contentWindow.location.href;

However, this URL will only be available when browsing sites on your domain due to the Same origin policy. It will be undefined and you will get a security error if you try on any other domain.

So, if you want to get pages from other domains and you want to do this with pure javascript, you can't.

Long answer: You could use a server-side proxy to load in the URLs requested in the iframe. Something like:

http://yourdomain.com/proxy.php?url=http://www.google.com/

And then when getting the URL get the url parameter and put that in the 'addr' input.

This approach is really not worth doing; You will use a lot of bandwidth and you will open your site up to people wanting to proxy through a firewall and abusing your proxy for their needs.