jQuery 使用 javascript 在 ie 中更改 iframe 源

change iframe source in ie using javascript

提问by Corniel

I have used an iframe which looks like this:

我使用了一个看起来像这样的 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>

Whenever I click on a <div>, I have to change the source of the iframe. I am using the following code:

每当我点击 a 时<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");    
}

This works with Firefox, but not with Internet Explorer.

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

What code would work for Internet Explorer too?

什么代码也适用于 Internet Explorer？

回答by Corniel

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.

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

回答by Kirtan

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

回答by Andi T

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

我已经尝试getElementById过很多其他变体。没有一个在 IE、FF、Opera 或 Chrome 上工作相同。

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

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

回答by Keyo

Since you've used the jquery tag this might be handy.

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

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

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

回答by SamGoody

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

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

1. Changing the href.
2. Changing the src.

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

Both methods require that the iFrame be completely loaded before you attempt the modification.

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

Changing the href works in all browsers, including IE5. You can address the frame

更改 href 适用于所有浏览器，包括 IE5。您可以对框架进行寻址

• 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';

• 通过引用元素的内容窗口：

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

• 通过引用元素的NAME：

  var myFrame = window.frames.myFrame; // 其中 myFrame 是元素的名称 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.

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

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

回答by EHCanadian83

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

document.getElementById('MsgBoxWindow').getAttribute('src')适用于 Internet Explorer、Firefox、Safari 以获取源 URL。

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

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain)在相同的浏览器上工作以设置源 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.

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

回答by mdja

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

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

This works in IE, FF, Safari, and so on, so no need for the messy browser detection too.

这适用于 IE、FF、Safari 等，因此也无需进行乱七八糟的浏览器检测。

nb. IIRC the frames collection references namein IE, idin other browsers, so you need both name and id attribute on the - but you already have that, so no worries!

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

回答by vince

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

回答by kl2217

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.

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

回答by kli

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

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

也有内存泄漏。这种效果在 IE 浏览器中更为明显。