Changing iframe src with Javascript

Question

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>

@mbq no, I mean it's a really bad idea in this scenario. The OP seems to be embedding code from an external service. You can't fetch that using AJAX in the first place because of cross domain security, and even if you could, having the HTML and putting it into a DIV wouldn't work, because it could contain relative references to images and style sheets and such. IFrames really are the thing to go here I think — Pekka
– Pekka, Commented Sep 16, 2010 at 20:29

awendt · Accepted Answer · 2018-06-24 14:31:07Z

153

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;

edited Jun 24, 2018 at 14:31

awendt

14.1k5 gold badges54 silver badges66 bronze badges

answered Sep 16, 2010 at 19:43

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pekka Over a year ago

@shinjuo onselect is not the correct attribute to use here. You may want to use onclick - notice though that that won't fire if the user uses their keyboard

shinjuo Over a year ago

That is what it was. Thanks. The reason I chose on select is because I thought that if someone tabbed through and hit space instead of mouse click that it would still change

Pekka Over a year ago

@shinjuo yeah, that is good idea. I think though that you'd have to use some variation of onchange for that.

Aaron D Over a year ago

"onclick" works for the keyboard. There is no "onselect" event.

Pekka Over a year ago

@Aaron there is a non-standard onselect event, but it's for selecting text. If onclick works for turning a radio button on / off then everything's solved, great!

|

wizzwizz4 · Accepted Answer · 2015-08-17 09:44:08Z

78

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)

edited Aug 17, 2015 at 9:44

wizzwizz4

6,5212 gold badges29 silver badges68 bronze badges

answered Jul 11, 2013 at 14:57

inemanja

1,37112 silver badges15 bronze badges

5 Comments

Fuevo Over a year ago

Could please explain why "google.com" not allowed in inframe and any advice to make it available(must not be iframe ,but similary)? Appreciate so much.

Mister SirCode Over a year ago

@hikaru89 this is a late reply... You cant just "make" it available. Its not allowed in iframes on purpose, google does this for many reasons on their own accord.

Paul Watson Over a year ago

that's amazing, no JS and target does the work, thank you.

Raven Dec 5, 2024 at 3:32

@MisterSirCode How would Google know it is in an iframe? Would Google still know it was in an iframe if you hid the referrer information on the iframe? <iframe src="..." referrerpolicy="no-referrer">

Mister SirCode Dec 6, 2024 at 4:24

@Raven No idea. I know some sites do it for security reasons, but Im not aware of the referrerpolicy getting around it.

Jim Clouse · Accepted Answer · 2013-12-24 14:50:34Z

19

Here's the jQuery way to do it:

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

answered Dec 24, 2013 at 14:50

Jim Clouse

9,0506 gold badges34 silver badges25 bronze badges

Comments

wizzwizz4 · Accepted Answer · 2015-08-17 09:58:03Z

9

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

edited Aug 17, 2015 at 9:58

wizzwizz4

6,5212 gold badges29 silver badges68 bronze badges

answered Sep 16, 2010 at 19:50

Aaron D

5,8971 gold badge39 silver badges55 bronze badges

2 Comments

Aaron D Over a year ago

@nalply - I don't understand your downvote. The root problem is not the spaces, which I said should be changed. The problem is the onselect should be onclick. Also note that the other answer by Pekka doesn't solve the problem. I'll re-order my answer to make it clearer.

nalply Over a year ago

I removed the downvote because your new edit is clearer than before.

Vikrant · Accepted Answer · 2016-09-30 09:41:47Z

8

This should also work, although the src will remain intact:

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

edited Sep 30, 2016 at 9:41

Vikrant

5,05218 gold badges53 silver badges77 bronze badges

answered Oct 14, 2014 at 0:13

Aram Paronikyan

1,60819 silver badges22 bronze badges

2 Comments

Frederic Leitenberger Over a year ago

This won't work when the page in the iframe is on a different domain.

Naren Over a year ago

How to change iframe src with Javascript function? HTML: <iframe id="mainframe" width="300" height="300"></iframe> JS: document.getElementById("mainframe").src=url;

KBH · Accepted Answer · 2018-05-14 19:14:05Z

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>

Facundo Colombier · Accepted Answer · 2021-05-07 16:41:55Z

2

None of the other answers worked for me, the iframe wasn't refreshing after changing the src so this is what finally did:

let calendar = document.getElementById("calendar");
calendar.setAttribute("src", srcstring);

MDN

answered May 7, 2021 at 16:41

Facundo Colombier

3,6912 gold badges40 silver badges44 bronze badges

Comments

Eric Aya · Accepted Answer · 2023-02-13 08:49:00Z

0

How to change iframe src with Javascript function?

HTML:

<iframe id="mainframe" width="300" height="300"></iframe>

JS:

document.getElementById("mainframe").src=url;

edited Feb 13, 2023 at 8:49

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Feb 12, 2023 at 19:23

Naren

993 bronze badges

Comments

Kapil Kumar · Accepted Answer · 2024-06-12 03:59:59Z

0

It's very simple. You can change the src property of the element. See the below code for reference.

document.getElementById("framebox").src = "NEW_URL"

note : "framebox" is the id of iframe in the above code

answered Jun 12, 2024 at 3:59

Kapil Kumar

1513 bronze badges

Comments

Liam · Accepted Answer · 2017-06-05 15:47:23Z

-1

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>");

edited Jun 5, 2017 at 15:47

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jun 5, 2017 at 14:44

daniel yanovsky

12 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-04-25 10:03:56Z

change onselect to onchange in inputs and use

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>

Collectives™ on Stack Overflow

Changing iframe src with Javascript

11 Answers 11

6 Comments

5 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

6 Comments

5 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related