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

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

has memory leakage too. The effect is more renounced in IE browsers.

Answer 2

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' 

Answer 3

I get this from somewhere else :

function getElementById(strId) {
  var element;

  if (document.getElementById) {
    element = document.getElementById(strId);
  }
  else if (document.all) {
    element = document.all[strId];
  } else if (document.layers) {
    element = document.layers[strId];
  } else {
    element = eval("document." + strId);
  }

  return element;
}

Answer 4

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

Answer 5

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 6

<script type="text/javascript">
  function changesrc(iframid, pagesrc)
  {
    document.getElementById(iframid).src = pagesrc; 
  }
</script>

<table style="width: 100%">
<tr>
  <td>
    <a href="#" onclick="changesrc('iframe1','page1.php')">Page1</a> <br/>
    <a href="#" onclick="changesrc('iframe1','page2.php')">Page2</a> <br/>
    <a href="#" onclick="changesrc('iframe1','page3.php')">Page3</a>
  </td>
  <td>   
    <iframe id="iframe1" src="page1.php" scrolling="no" 
            height="100%" width="100%" style="border:0px;"></iframe>
  </td>
</tr>
</table>