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?

score 25 · Answer 1 · edited Oct 19 '12 at 23:02

25

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.

edited Oct 19 '12 at 23:02

marrossa

678
6
9

answered Nov 30 '10 at 11:49

Corniel

251
3
2

This is definitely the way to go. Will be supported by all browsers. – bladefist Aug 16 '11 at 17:56
This is the better solution. I've made a jQuery function so you can pass a selector to it (id, class or element): function setIFrameSource(selector, url){ var myframe = $(selector)[0]; 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); } } } usage: `setIFrameSource('.fancybox-iframe','/somepage.htm');` – Kus Jan 06 '12 at 02:02

score 14 · Answer 2 · edited Jun 12 '11 at 16:20

14

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

edited Jun 12 '11 at 16:20

Nathan Campos

26,567
57
185
289

answered Mar 31 '09 at 08:05

Kirtan

20,187
6
43
60

For me it's not working in Safari. Instead, it changes the URL of the page itself. In fact, all of the solutions posted here seem to do that. It's a big mystery. – mcv Nov 17 '10 at 14:59
See for yourself: http://jsfiddle.net/RC3KA I've verified this works in IE 6-9, Chrome, Safari, Firefox, and Opera. – Andrew Childs Sep 18 '11 at 20:31

score 2 · Answer 3 · edited Apr 12 '16 at 16:15

2

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 = '/';

edited Apr 12 '16 at 16:15

newenglander

1,935
22
52

answered Jul 23 '10 at 07:37

Andi T

598
7
13

score 1 · Answer 4 · edited Oct 06 '12 at 14:42

document.getElementById('MsgBoxWindow').getAttribute('src') works in Internet Explorer, Firefox, Safari, to get the source URL.

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain) works on the same browsers to set the source URL.

However, the iframe must be loaded before calling. Don't place it before the iframe while calling the JavaScript code. You can place both after the iframe, if you are calling it right after the page load, and it will work as expected.

score 1 · Answer 5 · edited May 23 '17 at 10:32

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

score 1 · Answer 6 · answered Jul 23 '10 at 08:01

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

Changing the href.
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'

score 1 · Answer 7 · edited Oct 06 '12 at 14:45

1

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;
}

edited Oct 06 '12 at 14:45

Community

1
1

answered Feb 06 '11 at 06:33

vince

11
1

score 1 · Answer 8 · answered Mar 31 '09 at 08:47

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!

score 1 · Answer 9 · edited Jan 15 '12 at 05:06

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.

edited Jan 15 '12 at 05:06

grc

20,175
4
37
63

answered Jan 15 '12 at 03:15

kl2217

11
1

1

Is this memory leak specific to a particular browser? – Dave Hogan Oct 26 '12 at 07:17

score 1 · Answer 10 · edited Jan 17 '12 at 06:46

1

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

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

edited Jan 17 '12 at 06:46

Didier Ghys

29,364
9
67
76

answered Jan 16 '12 at 23:01

kli

11
1

score 1 · Answer 11 · edited Oct 27 '12 at 00:59

<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>

score 0 · Answer 12 · edited Oct 06 '12 at 14:47

0

Just use the following code.

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

It should work with every browser.

edited Oct 06 '12 at 14:47

Community

1
1

answered Jun 29 '09 at 22:35

getElementById for the iframe didn't work at all. I had to refer to it by "window.".. – Amalgovinus Mar 02 '11 at 02:25

score 0 · Answer 13 · answered Sep 23 '13 at 22:51

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);

change iframe source in ie using javascript

13 Answers13

Linked