用Javascript更改iframe src

我试图在有人单击单选按钮时更改iframe src。出于某种原因，我的代码无法正常工作，我无法找出原因。以下是我有：用Javascript更改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>

来源

2010-09-16 shinjuo

@Pekka这就是为什么它是一个注释解决这个问题。 – mbq 2010-09-16 20:22:51

@mbq不，我的意思是在这种情况下这是一个非常糟糕的主意。 OP似乎在嵌入来自外部服务的代码。由于跨域安全性，您无法首先使用AJAX获取该内容，即使可以，将HTML放入DIV也不行，因为它可能包含对图像和样式表的相对引用，这样。 IFrames真的是我想去的地方 – 2010-09-16 20:29:52

@Pekka我同意;我错过了那个远程服务部分。我删除了我的评论，不要混淆人。 – mbq 2010-09-16 23:23:59

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

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

应该

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

来源

2010-09-16 19:43:55

我改变了它，它仍然没有工作。 – shinjuo 2010-09-16 19:45:05

+11

@shinjuo'onselect'不是在此使用的正确属性。你可能想使用'onclick' - 注意，虽然这不会触发，如果用户使用他们的键盘 – 2010-09-16 19:46:01

这就是它。谢谢。我选择select的原因是因为我认为，如果有人通过鼠标点击并点击空间，它仍然会改变 – shinjuo 2010-09-16 19:47:52

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

来源

2010-09-16 19:50:28

不正确。 http://stackoverflow.com/questions/828262 – nalply 2012-04-05 18:17:17

@nalply - 我不明白你downvote。根本问题不是空间，我说*应该*改变。问题是onselect应该是onclick。还要注意Pekka的其他答案不能解决问题。我会重新排列我的答案，使其更清晰。 – 2012-04-26 20:21:01

我删除了downvote，因为你的新编辑比以前更清晰。 – nalply 2012-04-27 13:15:02

也许这可能会有帮助...这是纯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中打开它们（安全原因 - 点击劫持）

来源

2013-07-11 14:57:19 inemanja

这里是jQuery的方式做到这一点：

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

来源

2013-12-24 14:50:34

这应该也行，虽然src将保持不变：

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

来源

2014-10-14 00:13:30

当iframe中的页面位于不同的域时，这不起作用。 – 2014-10-23 17:06:04

-1

您可以通过iframe中的JavaScript

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

来源

2017-06-05 14:44:16

用Javascript更改iframe src

回答

相关问题