如何在JavaScript中更改iframe的源位置？

Question

如何在JavaScript中更改iframe的源位置？

例如，只需点击按钮或链接，即可更改：

<iframe src=""></iframe>

......进入这个：

<iframe src="http://stackoverflow.com/"></iframe>

而且，如果你想做得更好，如何在同一页面内更改多个iframe（使用name或其他标识符）？

Answer 1

首先，为iframe分配一个id。这看起来像

<iframe id="youridname" src=""></iframe>;. 

然后您的JavaScript命令将是

document.getElementById("youridname").src = "http://stackoverflow.com";

Answer 2

与修改任何其他标签没有什么不同。获取元素，并设置属性：

document.getElementsByTagName("iframe")[0].src = "http://stackoverflow.com";

您可以根据自己喜欢的任何属性进行选择。例如，如果您有<iframe data-id='some-frame' src='http://stackoverflow.com'></iframe>，则可以选择以下任一属性：

var soFrames = document.querySelectorAll("iframe[src*='overflow']");
if (soFrames.length > 0) {
    soFrames[0].src = "something.com";
}

或者：

var soFrames = document.querySelectorAll("iframe[data-id='some-frame']")

_{（请注意，存在安全限制，因此您无法在网页的iframe中显示任何随机网站，例如Stackoverflow.com。）}

Answer 3

您可以引用window.frames页面中的框架。它包含框架'window对象的集合。从那里你修改框架location.href的{​​{1}}：

window

您还可以通过引用框架元素的frames[0].location.href = "page1.htm"; frames[1].location.href = "page2.htm"; 属性来获取框架的窗口：

contentWindow

要向后移动，即从框架中获取框架元素，请使用document.getElementById("frame1").contentWindow.location.href = "page1.htm"; 属性：

frameElement

Answer 4

document.getElementById("test").setAttribute("src", "http://stackoverflow.com");