Best IT Recipes

Changing iframe src with javascript

I try to change <iframe src=... > when someone clicks a switch. For some reason, my code is not working correctly, and I cannot understand 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>
+72
javascript iframe src
Sep 16 '10 at 19:42
source share
8 answers

In this case, this is possible because you are using the wrong brackets here:

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

it should be

 document.getElementById('calendar').src = loc;
+105
Sep 16 '10 at 19:43
source share

Maybe this can be useful ... This is a simple 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 an iframe (security considerations - clickjacking)

+54
Jul 11 '13 at 14:57
source share

Here is the jQuery way to do this:

 $('#calendar').attr('src', loc);
+15
Dec 24 '13 at 14:50
source share

onselect must be onclick . This will work for keyboard users.

I would also recommend adding <label> tags to the Day, Month, and Year texts to make them easier to click. Code example:

 <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 onclick attribute 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

Must 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
+6
Sep 16 '10 at 19:50
source share

This should also work, although src will remain unchanged:

 document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
+5
Oct 14 '14 at 0:13
source share

Here is my updated code. It works great and 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>
0
May 14 '18 at 19:14
source share

change onselect to onchange in inputs and usage

 calendar.src = loc 

 <!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) { 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" onchange="go('https://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" onchange="go('https://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" onchange="go('https://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>
0
Apr 25 '19 at 10:03
source share

You can solve this problem by creating an iframe in javascript

  document.write(" <iframe id='frame' name='frame' src='" + srcstring + "' width='600' height='315' allowfullscreen></iframe>");
-one
Jun 05 '17 at 14:44
source share


More articles:


All Articles