使用Javascript更改iframe src

shi*_*juo 83 javascript iframe src

当有人点击单选按钮时,我正在尝试更改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>
Run Code Online (Sandbox Code Playgroud)

Pek*_*ica 115

在这种情况下,可能是因为你在这里使用了错误的括号:

document.getElementById['calendar'].src = loc;
Run Code Online (Sandbox Code Playgroud)

应该

document.getElementById('calendar').src = loc;
Run Code Online (Sandbox Code Playgroud)

  • @shinjuo`onselect`不是这里使用的正确属性.您可能想要使用`onclick` - 请注意,如果用户使用键盘,则不会触发 (11认同)
  • "onclick"适用于键盘.没有"onselect"事件. (2认同)

ine*_*nja 57

也许这可能会有所帮助...这是简单的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>
Run Code Online (Sandbox Code Playgroud)

顺便说一下,有些网站不允许你在iframe中打开它们(安全原因 - 点击劫持)

  • 请解释为什么“http://google.com”不允许在inframe中以及任何使其可用的建议(不能是iframe,但类似)?非常欣赏。 (2认同)
  • @hikaru89 这是一个迟到的回复......你不能只是“使其”可用。它是故意不允许在 iframe 中使用的,谷歌出于多种原因自行这样做。 (2认同)

Jim*_*use 18

这是jQuery的方法:

$('#calendar').attr('src', loc);
Run Code Online (Sandbox Code Playgroud)


Aar*_*n D 7

onselect必须onclick.这适用于键盘用户.

我还建议<label>在"Day","Month"和"Year"的文本中添加标签,以便更容易点击.示例代码:

<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>
Run Code Online (Sandbox Code Playgroud)

我还建议删除属性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
Run Code Online (Sandbox Code Playgroud)

应该:

<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
Run Code Online (Sandbox Code Playgroud)

  • @nalply - 我不明白你的downvote.根本问题不是空格,我说*应该*改变.问题是onselect应该是onclick.另请注意,Pekka的另一个答案并没有解决问题.我会重新订购我的答案,以使其更清晰. (2认同)

Ara*_*yan 5

这也应该有效,尽管src意志保持不变:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
Run Code Online (Sandbox Code Playgroud)

  • 当iframe中的页面位于其他域时,这将不起作用. (3认同)