使用 Javascript 更改 iframe src

Posted 2023-03-05

技术标签:

【中文标题】使用 Javascript 更改 iframe src【英文标题】：Changing iframe src with Javascript 【发布时间】：2011-04-13 09:50:19 【问题描述】：

当有人单击单选按钮时，我正在尝试更改 <iframe src=... >。出于某种原因，我的代码无法正常工作，我无法弄清楚原因。这是我所拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

  <script>
  function go(loc) 
    document.getElementById('calendar').src = loc;
  
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank"   frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>

【问题讨论】：

@Pekka 这就是为什么它是一个评论。 @mbq 不，我的意思是在这种情况下这是一个非常糟糕的主意。 OP 似乎正在嵌入来自外部服务的代码。由于跨域安全性，您首先无法使用 AJAX 获取它，即使可以，拥有 HTML 并将其放入 DIV 也行不通，因为它可能包含对图像和样式表的相对引用和这样的。我认为 IFrame 真的很适合这里 @Pekka 我同意；我错过了远程服务部分。我删除了我的评论，以免引起人们的困惑。为什么上面的代码在任何浏览器中都有效？？？？ 【参考方案1】：

在这种情况下，可能是因为您在这里使用了错误的括号：

document.getElementById['calendar'].src = loc;

应该是

document.getElementById('calendar').src = loc;

【讨论】：

@shinjuo onselect 不是此处使用的正确属性。您可能想使用onclick - 请注意，如果用户使用他们的键盘，它不会触发原来如此。谢谢。我选择 select 的原因是因为我认为如果有人通过 tab 键并点击空格而不是鼠标点击它仍然会改变 @shinjuo 是的，这是个好主意。我认为您必须为此使用onchange 的一些变体。 "onclick" 适用于键盘。没有“onselect”事件。 @Aaron 有一个非标准的 onselect 事件，但它用于选择文本。如果onclick 可以打开/关闭单选按钮，那么一切都解决了，太好了！【参考方案2】：

也许这会有所帮助...它是纯 html - 没有 javascript：

<p>Click on link bellow to change iframe content:</p>
<a href="http://www.bing.com" target="search_iframe">Bing</a> -
<a href="http://en.wikipedia.org" target="search_iframe">Wikipedia</a> -
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe)

<iframe src="http://en.wikipedia.org"   name="search_iframe"></iframe>

顺便说一句，有些网站不允许您在 iframe 中打开它们（安全原因 - 点击劫持）

【讨论】：

能否解释一下为什么“google.com”不允许在 inframe 中以及任何建议使其可用（不能是 iframe，但类似）？非常感谢。 @hikaru89 这是一个迟到的回复......你不能只是“让”它可用。它不允许在 iframe 中故意使用，谷歌出于多种原因自行这样做。【参考方案3】：

这是 jQuery 的方法：

$('#calendar').attr('src', loc);

【讨论】：

【参考方案4】：

onselect 必须是 onclick。这将适用于键盘用户。

我还建议将<label> 标签添加到“日”、“月”和“年”的文本中，以使它们更易于点击。示例代码：

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/><label for="day">Day</label>

我还建议删除属性onclick 和值之间的空格，尽管它可以被浏览器解析：

<input name="calendarSelection" type="radio" onclick = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

应该是：

<input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

【讨论】：

@nalply - 我不明白你的反对意见。根本问题不是空格，我说应该改变。问题是onselect应该是onclick。另请注意，Pekka 的另一个答案并没有解决问题。我将重新排序我的答案以使其更清楚。我删除了反对票，因为您的新编辑比以前更清晰。【参考方案5】：

这也应该有效，尽管 src 将保持不变：

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";

【讨论】：

当 iframe 中的页面位于不同的域时，这将不起作用。【参考方案6】：

这是我更新的代码。它工作正常，它可以帮助你。

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript">
  function go(loc) 
    document.getElementById('calendar').src = loc;
  
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank"   frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>

【讨论】：

【参考方案7】：

其他答案都不适合我，更改 src 后 iframe 没有刷新，所以这就是最终所做的：

let calendar = document.getElementById("calendar");
calendar.setAttribute("src", srcstring);

MDN

【讨论】：

【参考方案8】：

将输入中的 onselect 更改为 onchange 并使用

calendar.src = loc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

  <script>
  function go(loc) 
    calendar.src = loc;
  
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank"   frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onchange="go('https://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onchange="go('https://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onchange="go('https://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>

【讨论】：

【参考方案9】：

你可以通过在javascript中制作iframe来解决它

  document.write(" &lt;iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen&gt;&lt;/iframe&gt;");

【讨论】：

以上是关于使用 Javascript 更改 iframe src的主要内容，如果未能解决你的问题，请参考以下文章

使用 Javascript 更改 iframe src

iOS 浏览器 - 使用 JavaScript 更改 css 或内容时 iFrame 跳转到顶部

谷歌浏览器在 JavaScript 动态更改后未更新 iframe 元素 innerHTML

JavaScript 更改Facebook iframe选项卡大小

使用数据属性更改 iframe 内元素的 CSS

在javascript上更改src iframe无法正常工作