改变iframe源即使用javascript

我使用了iframe,如下所示:

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

每当我点击

,我都要更改iframe的来源。 我使用以下代码:

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

这适用于Firefox,但不适用于Internet Explorer。

什么代码也适用于Internet Explorer?

您永远不应该使用“浏览器检测”,而是检测function。 imho最安全的方式是:

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

只测试src属性是否可用。 如果没有,请在内容窗口上进行测试,最后一次尝试是setAttribute。

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

我已经尝试了getElementById和许多其他变种。 在IE,FF,Opera或Chrome上没有相同的function。

这个很好用: parent.frames.IFRAME_ID.location.href = '/';

frames集合返回窗口对象(或等价物)。 您想要定位文档对象; 尝试做:

window.frames [‘iframeId’]。document.location.href = ….

这适用于IE,FF,Safari等,所以不需要凌乱的浏览器检测。

NB。 IIRC框架集合引用IE中的名称 ,其他浏览器中的id ,所以你需要名字和id属性 – 但你已经有了,所以不用担心!

由于您已经使用了jquery标记,因此这可能很方便。

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

如果您正在进行跨浏览器resize,请查看此post,其中介绍了如何根据iframe内容自动调整高度。 您需要访问iframed网站的html。 根据内容调整iframe大小

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

它有内存泄漏。 在iframe src多次更改后,您的浏览器会慢慢爬行。

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

也有内存泄漏。 在IE浏览器中,效果更加放弃。

document.getElementById('MsgBoxWindow').getAttribute('src')在Internet Explorer,Firefox,Safari中工作,以获取源URL。

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain)在相同的浏览器上工作以设置源URL。

但是,必须在调用之前加载iframe。 调用JavaScript代码时,请勿将其放在iframe之前。 如果您在页面加载后立即调用iframe,则可以将它们放在iframe之后,并且它将按预期工作。

我从其他地方得到这个:

 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; } 
  
Page1
Page2
Page3

您可以使用两种方法更改iframe的src:

  1. 更改href。
  2. 改变src。

两种方法都要求在尝试修改之前完全加载iFrame。

更改href适用于所有浏览器,包括IE5。 你可以解决这个问题

  • 通过引用元素的contentwindow:

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

  • 通过引用元素的NAME:

    var myFrame = window.frames.myFrame; //其中myFrame是元素的名称myFrame.location =’ http://example.com ‘;

通过选择元素并更改src,更改src如上所述 – 但它必须是子元素,而不是子元素。

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

只需使用以下代码即可。

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

它应该适用于每个浏览器。

请注意,如果您只是更改URL的#anchor(即从page.php #this更改为page.php#),那么IE将不会刷新页面,但Chrome和Firefox将会刷新。 如果这是您的问题,那么您可能希望在查询字符串中添加一些随机内容,以使IE认为它是一个全新的页面并强制重新加载。

例如(使用jQuery):

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