Question

I have a main page that loads a default link in an iframe http://mypage.com/myurl. Having it in a blog, I want to dynamically change that default link inside the iframe, for every post page. I load the default link like that:

<iframe width='1000' height='500' name='iframename' frameborder='0'
        src='http:/mypage.com/myurl'></iframe>

(works on all browsers) and i change dynamically the link inside the iframe by putting this code in every post page:

<script type="text/javascript">
    document.iframename.location = "http://mypage.com/mynewurl"; 
</script>

It works fine on chrome and ie, but it does not work on firefox!!

Any ideas or work around?

Here a simplified example http://www.tinyurl.com/9l7zt2n see the difference with firefox it loads the default link in the iframe. ie and chrome can change with the added javascript.

If it helps to test it on the blog http://www.tinyurl.com/9axhquh u can see it working on chrome and ie, if u click on any post title or “read more” to load the post’s page, the iframe on top changes accordingly

Any ideas or work around?

Answer 1

document.iframename.location is probably not supported crossbrowser.

try:

<iframe width='1000' height='500' id='iframeid' frameborder='0' src='http:/mypage.com/myurl'></iframe>

<script type="text/javascript">
    document.getElementById('iframeid').src = "http://mypage.com/mynewurl";
</script>

this means:

1. accessing an element by name through a document.elementName syntax is not supported.
2. an iframe element has no property called location. location is a property of window. You can access the window of an iframe by using using contentWindow.

I’ve written a short test here http://jsfiddle.net/FyNW9/. Run it in different browsers.