用Javascript更改iframe src
我试图改变一个iframe src时，有人点击一个单选button。 出于某种原因，我的代码不能正常工作，我无法弄清楚为什么。 这是我有什么：
<!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> 在这种情况下，可能是因为你在这里使用了错误的括号：
document.getElementById['calendar'].src = loc;
应该
document.getElementById('calendar').src = loc;
也许这可能是有帮助的…这是纯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>
这是jQuery的方式来做到这一点：
$('#calendar').attr('src', loc);
onselect必须是onclick 。 这将适用于键盘用户。
我还build议在“日”，“月”和“年”的文本中添加<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>
我也build议删除属性onclick和值之间的空格，虽然它可以被浏览器parsing：
<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
这也应该工作，虽然src将保持不变：
document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
你可以通过在JavaScript中使用iframe来解决它
document.write(" <iframe id='frame' name='frame' src='" + srcstring + "' width='600' height='315' allowfullscreen></iframe>");
