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, Sep 16 '10 at 20:29

score 150 · Accepted Answer · edited Jun 24 '18 at 14:31

150

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 '18 at 14:31

awendt

13,195
5
48
66

answered Sep 16 '10 at 19:43

Pekka

442,112
142
972
1,088

11

@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 – Pekka Sep 16 '10 at 19:46
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 – shinjuo Sep 16 '10 at 19:47
@shinjuo yeah, that is good idea. I think though that you'd have to use some variation of `onchange` for that. – Pekka Sep 16 '10 at 19:49
2

"onclick" works for the keyboard. There is no "onselect" event. – Aaron D Sep 16 '10 at 19:57
@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! – Pekka Sep 16 '10 at 19:59
It seems worth noting that `document.getElementById('calendar').attributes.src = loc;` does not work. I believe that `attributes` makes a copy of the object instead of actually setting it on the node – Ben Simpson Mar 22 '21 at 14:40

score 74 · Answer 2 · edited Aug 17 '15 at 09:44

74

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 '15 at 09:44

wizzwizz4

6,140
2
26
62

answered Jul 11 '13 at 14:57

inemanja

1,312
12
15

2

Could please explain why "http://google.com" not allowed in inframe and any advice to make it available(must not be iframe ,but similary)? Appreciate so much. – Fuevo Aug 10 '18 at 09:19
2

@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. – Mister SirCode Oct 18 '19 at 11:34
1

that's amazing, no JS and target does the work, thank you. – Paul Watson May 11 '22 at 12:17

score 19 · Answer 3 · answered Dec 24 '13 at 14:50

19

Here's the jQuery way to do it:

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

answered Dec 24 '13 at 14:50

Jim Clouse

8,774
6
32
25

score 9 · Answer 4 · edited Aug 17 '15 at 09:58

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

@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. — Aaron D, Apr 26 '12 at 20:21
I removed the downvote because your new edit is clearer than before. — nalply, Apr 27 '12 at 13:15

score 8 · Answer 5 · edited Sep 30 '16 at 09:41

8

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

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

edited Sep 30 '16 at 09:41

Vikrant

4,920
17
48
72

answered Oct 14 '14 at 00:13

Aram Paronikyan

1,598
17
22

4

This won't work when the page in the iframe is on a different domain. – Frederic Leitenberger Oct 23 '14 at 17:06
1

How to change iframe src with Javascript function? HTML: JS: document.getElementById("mainframe").src=url; – Naren Feb 12 '23 at 19:24

score 3 · Answer 6 · answered May 14 '18 at 19:14

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>

score 2 · Answer 7 · answered May 07 '21 at 16:41

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 07 '21 at 16:41

Facundo Colombier

3,487
1
34
40

score 0 · Answer 8 · answered Apr 25 '19 at 10:03

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>

score 0 · Answer 9 · edited Feb 13 '23 at 08:49

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 '23 at 08:49

Eric Aya

69,473
35
181
253

answered Feb 12 '23 at 19:23

Naren

99
3

score -1 · Answer 10 · edited Jun 05 '17 at 15:47

-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 05 '17 at 15:47

Liam

27,717
28
128
190

answered Jun 05 '17 at 14:44

daniel yanovsky

1
2

Changing iframe src with Javascript

10 Answers10

Linked

Related