change iframe source in ie using javascript

Question

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 on a <div>, I have to change the source of the iframe. I am using the following code:

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 works with Firefox, but not with Internet Explorer.

What code would work for Internet Explorer too?

Answer 1

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

It has memory leakage. After the iframe src has changed many times, your browser slows down to a crawl.

Answer 2

Note that if you are only changing the #anchor of the URL (i.e. changing from page.php#this to page.php#that) then IE won't refresh the page but Chrome and Firefox will. If this is your issue then you may want to add something random to your query string to make IE think it's a totally new page and force the reload.

For example (using jQuery):

var hash = 'yourHash';
var rand = 1 + Math.floor(Math.random() * 9999);
var helpUrl = 'page.php?rand=' + rand + '#' + hash;
$('#iframe').attr('src', helpUrl);

Answer 3

You should never user 'browser detection', but feature detection. The most safe way imho is this:

function SetIFrameSource(cid, url){
  var myframe = document.getElementById(cid);
  if(myframe !== null){
    if(myframe.src){
      myframe.src = url; }
    else if(myframe.contentWindow !== null && myframe.contentWindow.location !== null){
      myframe.contentWindow.location = url; }
    else{ 
      myframe.setAttribute('src', url); 
    }
  }
}

Just test if the src property is available. If not, test on content window, and the last try is setAttribute.

Answer 4

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. Resizing an iframe based on content

Answer 5

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

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

Answer 6

Just use the following code.

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

It should work with every browser.