使用Javascript更改iframe src

94

我正在尝试更改<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>
展开摘要

javascript  iframe  src 
— 新ju
source
@Pekka这就是为什么要发表评论。
— mbq 2010年
@mbq不，我的意思是在这种情况下这是一个非常糟糕的主意。OP似乎正在嵌入来自外部服务的代码。出于跨域安全性的考虑，您不能首先使用AJAX进行获取，即使可以，也无法将HTML放入DIV中，因为它可能包含对图像和样式表的相对引用，并且这样。我认为，iFrame确实是您可以去的地方
— Pekka 2010年
@佩卡我​​同意; 我错过了远程服务部分。我删除了我的评论，以免使人感到困惑。
— mb10
为什么在任何浏览器中都无法使用上面的代码？？？
— 哈里克斯

Answers:

125

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

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

应该

document.getElementById('calendar').src = loc;
— 佩卡
source
11
@shinjuo onselect不是在此处使用的正确属性。您可能想要使用onclick-请注意，如果用户使用键盘，那不会触发
— Pekka 2010年
就是这样。谢谢。我选择“选择”的原因是因为我认为，如果有人通过
— 跳入
@shinjuo是的，这是个好主意。我认为虽然您必须为此使用一些变体onchange。
— 佩卡
2
“ onclick”适用于键盘。没有“ onselect”事件。
— 亚伦D
@Aaron有一个非标准的onselect事件，但是它是用于选择文本的。如果onclick可以打开/关闭单选按钮，那么一切都解决了，太好了！
— 佩卡
61

也许这会有所帮助...它是纯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中打开它们（出于安全原因-clickjacking）

— Inemanja
source
2
请解释一下为什么google.com不允许在框架内使用，以及提供使其可用的任何建议（必须不是iframe，但类似）？非常感谢。
— Qibiron谁
1
@ hikaru89，这是一个较晚的回复...您不能只是“使其”可用。Google故意禁止在iframe中使用它，出于多种原因，谷歌出于自身原因这么做。
— SirCode先生，19年
8

在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
— 亚伦·D
source
2
@nalply-我不明白你的反对意见。根本问题不是空格，我说过应该更改。问题是onselect应该是onclick。另请注意，佩卡（Pekka）提出的另一个答案不能解决问题。我将重新排列我的答案以使其更清楚。
— 亚伦D
我删除了downvote，因为您的新编辑比以前更清晰。
— 2012年
2

这是我更新的代码。它工作正常，可以为您提供帮助。

<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" width="1000" height="450" 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>
— KBH
source
0

更改onselect为onchange输入和使用

calendar.src = loc

显示代码段

— 卡米尔（KamilKiełczewski）
source
-1

您可以通过在javascript中制作iframe来解决此问题

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
展开摘要
— 丹尼尔·亚诺夫斯基
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.