使用 javascript 在 ie 中更改 iframe 源答案

【问题标题】：change iframe source in ie using javascript使用 javascript 在 ie 中更改 iframe 源
【发布时间】：2009-03-31 08:03:27
【问题描述】：

我使用的 iframe 如下所示：

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

每当我点击<div> 时，我都必须更改 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？

【问题讨论】：

标签： jquery iframe

【解决方案1】：

您永远不应使用“浏览器检测”，而应使用功能检测。恕我直言，最安全的方法是：

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。

【讨论】：

这绝对是要走的路。将被所有浏览器支持。
这是更好的解决方案。我制作了一个 jQuery 函数，因此您可以将选择器传递给它（id、类或元素）： 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); } } } 用法：setIFrameSource('.fancybox-iframe','/somepage.htm');

【解决方案2】：

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

【讨论】：

对我来说，它在 Safari 中不起作用。相反，它会更改页面本身的 URL。事实上，这里发布的所有解决方案似乎都可以做到这一点。这是一个很大的谜。
亲眼看看：jsfiddle.net/RC3KA 我已经验证这在 IE 6-9、Chrome、Safari、Firefox 和 Opera 中有效。

【解决方案3】：

我尝试了getElementById 和许多其他变体。在 IE、FF、Opera 或 Chrome 上都没有相同的效果。

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

【讨论】：

【解决方案4】：

frames 集合返回窗口对象（或等效对象）。您要定位文档对象；尝试做：

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

这在IE、FF、Safari等中都有效，所以也不需要杂乱的浏览器检测。

注意。 IIRC 框架集合在 IE 中引用 name，在其他浏览器中引用 id，因此您需要 name 和 id 属性 - 但您已经拥有了，所以不用担心！

【讨论】：

【解决方案5】：

由于您使用了 jquery 标记，这可能会很方便。

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

如果您正在进行跨浏览器调整大小，请查看这篇文章，其中解释了如何根据 iframe 内容自动调整高度。您将需要访问 iframed 网站的 html。 Resizing an iframe based on content

【讨论】：

【解决方案6】：

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

更改 href。
更改源代码。

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

更改href 适用于所有浏览器，包括IE5。你可以解决框架

通过引用元素的contentwindow：

var myFrame = document.getElementById('myFrame'); myFrames.contentWindow.location = 'http://example.com';
通过引用元素的名称：

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

改变src如上面所说，通过选择元素并改变src - 但它必须是子元素，而不是后代元素。

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

这种内存泄漏是否特定于特定浏览器？

【解决方案8】：

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

也有内存泄漏。这种效果在 IE 浏览器中被放弃了。

【讨论】：

【解决方案9】：

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

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

但是，iframe 必须在调用之前加载。调用 JavaScript 代码时，不要将其放在 iframe 之前。如果您在页面加载后立即调用它，则可以将两者放在 iframe 之后，它会按预期工作。

【讨论】：

【解决方案10】：

我从其他地方得到这个：

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

只需使用以下代码。

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

它应该适用于所有浏览器。

【讨论】：

iframe 的 getElementById 根本不起作用。我不得不通过“window.”来引用它..

【解决方案13】：

请注意，如果您只是更改 URL 的#anchor（即从 page.php#this 更改为 page.php#that），则 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);

【讨论】：