使用 Javascript 更改 iframe src

IT技术 javascript iframe src
2021-01-11 02:17:20

<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" width="1000" height="450" 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>

6个回答

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

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

应该

document.getElementById('calendar').src = loc;
@Aaron 有一个非标准的 onselect 事件，但它用于选择文本。如果onclick可以打开/关闭单选按钮，那么一切都解决了，太棒了！
2021-03-12 02:17:20
原来如此。谢谢。我选择 select 的原因是因为我认为如果有人通过 tab 键并点击空格而不是鼠标点击它仍然会改变
2021-03-14 02:17:20
@shinjuo 是的，这是个好主意。我认为尽管您必须为此使用一些变体onchange。
2021-03-14 02:17:20
@shinjuoonselect不是在这里使用的正确属性。您可能想要使用onclick- 请注意，如果用户使用键盘，则不会触发
2021-04-05 02:17:20
“onclick”适用于键盘。没有“onselect”事件。
2021-04-11 02:17:20

也许这会有所帮助...它是纯 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" width="100%" height="100%" name="search_iframe"></iframe>

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

能否解释一下为什么“ google.com ”不允许出现在 inframe 中以及任何使其可用的建议（不能是 iframe，但类似）？非常欣赏。
2021-04-01 02:17:20
@ hikaru89 这是一个迟到的回复......你不能只是“让它”可用。故意在 iframe 中不允许这样做，谷歌出于多种原因自愿这样做。
2021-04-02 02:17:20

这是执行此操作的 jQuery 方法：

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

在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
我删除了反对票，因为您的新编辑比以前更清晰。
2021-03-16 02:17:20
@nalply - 我不明白你的反对意见。根本问题不是空格，我说应该改。问题是 onselect 应该是 onclick。另请注意，Pekka 的另一个答案并没有解决问题。我会重新排列我的答案以使其更清楚。
2021-03-28 02:17:20

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

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
当 iframe 中的页面位于不同的域中时，这将不起作用。
2021-04-09 02:17:20
其它你可能感兴趣的问题
上一篇如何通过javascript更改按钮点击时<a>标签的href 下一篇在 JavaScript 中设置 CSS 属性？