change iframe source in ie using javascript

Question

Hi, i have used an iframe which looks like this

<iframe style='width: 330px; height: 278px' scrolling='no' name="iframeId" class="advPlayer" id="iframeId" frameborder="0" src='../../player/iabpreview.php?adid=<?php echo $selectedAdIdx ?>&amp;autoPlay=true'></iframe>

whenever i click a div,i have to change the source of the iframe..so i am using

if ($j.browser.msie) {            

   frames['iframeId'].window.location="../player/iabpreview.php?adid="+adId+"&autoPlay=true";
    }else
    {
    $j(".advPlayer").eq(0).attr("src", "../player/iabpreview.php?adid="+adId+"&autoPlay=true");    
    }

this is working in firefox...but not in ie.....

someone please help me...

Answer 1

document.getElementById("iframeId").src = "Your URL here."

Answer 2

The frames collection returns window objects (or the equivalent of). You want to target the document object; try doing:

window.frames['iframeId'].document.location.href = ....

This works in IE, FF, Safari, and so on, so no need for the messy browser detection too.

nb. IIRC the frames collection references name in IE, id in other browsers, so you need both name and id attribute on the - but you already have that, so no worries!

Answer 3

Please, just use:

var iframe = document.getElementById('IFRAME ID'); // just for clarity

iframe .src = 'URL here';

It works probably in every browser

If any problem please let me know

Giorgi

Answer 4

Seems like this only works in IE: window.frames['iframeId'].document.location.href = ....

and this only works in firefox..

var iframe = document.getElementById('IFRAME ID'); // just for clarity

iframe .src = 'URL here';

Is there a solution that works in both browsers without detecting the type of browser?

Thanks, Angela

Answer 5

document.getElementById('MsgBoxWindow').getAttribute('src') works in IE,FF,Saf,Crm to get the src url

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain) works in IE,FF,Saf,Crm to set the src url

However. frame must be loaded before calling. Don't place it above the iframe html while calling the above javascript. However u can place both below the iframe if your calling it right after the page load and it will work as expected.

Answer 6

Thanks Giorgi... it works fine in every browser

Answer 7

I've tried getElementById and a lot else variants. None worked the same on IE, FF, Opera, Chrome.

This one works well: parent.frames.IFRAME_ID.location.href = '/';

Answer 8

Since you've used the jquery tag this might be handy.

function resizeIframe(height) {
    height = parseInt(height);
    height += 100;
    $('iframe#youriframeID').attr('height', height);   
}

In case you are doing cross-browser resizing have a look at this post which explains how to automatically resize the height based on the iframes content. You will need access to the html of the iframed website. http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content

Answer 9

You can change the src of the iframe using two methods:

1. Changing the href.
2. Changing the src.

Both methods require that the iFrame be completely loaded before you attempt the modification.

Changing the href works in all browsers, including IE5. You can address the frame

• By refering to the contentwindow of the element:

  var myFrame = document.getElementById('myFrame'); myFrames.contentWindow.location = 'http://example.com';

• By refering to the NAME of the element:

  var myFrame = window.frames.myFrame; // where myFrame is the NAME of the element myFrame.location = 'http://example.com';

Changing the src is as said above, by selecting the element and changing the src - but it must be a child, not a descendant element.

var myFrame = document.getElementById('myFrame');
myFrame.src = 'http://example.com'