I am trying to change an iframe src when someone clicks a radio button. For some reason my code is not working correctly and I am having trouble figuring out why. Here is what I have:
<!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>
In this case, it\'s probably because you are using the wrong brackets here:
document.getElementById[\'calendar\'].src = loc;
should be
document.getElementById(\'calendar\').src = loc;
Maybe this can be helpful... It\'s plain html - no 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>
By the way some sites do not allow you to open them in iframe (security reasons - clickjacking)
Here\'s the jQuery way to do it:
$(\'#calendar\').attr(\'src\', loc);
The onselect must be onclick. This will work for keyboard users.
I would also recommend adding <label> tags to the text of \"Day\", \"Month\", and \"Year\" to make them easier to click on. Example code:
<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>
I would also recommend removing the spaces between the attribute onclick and the value, although it can be parsed by browsers:
<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
Should be:
<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
This should also work, although the src will remain intact:
document.getElementById(\"myIFrame\").contentWindow.document.location.href=\"http://myLink.com\";
Here is my updated code. It works fine and it can help you.
<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>
You can solve it by making the iframe in javascript
document.write(\" <iframe id=\'frame\' name=\'frame\' src=\'\" + srcstring + \"\' width=\'600\' height=\'315\' allowfullscreen></iframe>\");
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 裙下三千臣 的文章《Changing iframe src with Javascript》','https://www.manongdao.com/article-9188.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}