Changing iframe src with jquery

Question

I am trying to change my iframe src and reload the iframe with the following code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $('#changeframe').click(function () {
  $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
</script>


<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>

When I click "Change" on the button nothing happens. What I am doing wrong?

If the code is as it is in your example, you need to wrap the jQuery in $(function() { ... }); since the button does not exist when the script runs — mplungjan
– mplungjan, Commented Apr 30, 2017 at 8:05
Rearrange the order. Script go last and try again :) - #changeframe doesn't exist yet in your current order. — Noobit
– Noobit, Commented Apr 30, 2017 at 8:05
Maybe jQuery is being run before the browser knows of those elements... hence the dom ready function? which you don't seem to be using... — NewToJS
– NewToJS, Commented Apr 30, 2017 at 8:05

Noobit · Accepted Answer · 2017-04-30 08:08:05Z

7

The order does matter.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>

// Go Last since changeframe hasn't exist yet.
<script>
  $('#changeframe').click(function () {
      $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
</script>

answered Apr 30, 2017 at 8:08

Noobit

4313 silver badges9 bronze badges

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

4 Comments

Arya Over a year ago

This works thank you, is is possible to use a text link instead of the button?

Noobit Over a year ago

Yes since it is just onclick. I suggest upgrade your jQuery since version 1.11.1 is ancient :P

mplungjan Over a year ago

However 1.11 is still compatible with IE<11

Arya Over a year ago

@Noobit how would the link looks like? Right now I have but to no avail <a onclick="changeframe" id="again">Change</a>

mplungjan · Accepted Answer · 2017-04-30 08:49:50Z

0

If the code is as it is in your example, you need to wrap the jQuery in
$(function() { ... }); or move it below the html since the button does not exist when the script runs
Look in the console. You MAY not be allowed to change the src of an iframe containing a url from another domain - some browsers like IE can throw a security exception. You could have access denied in the console
Some websites do not allow their pages to be framed. It is not the case in your example but would for example give errors if you try to load google in a frame

$(function() {
  $('#changeframe').click(function() {
    $('#declinedframe').attr('src', 'http://stackoverflow.com');
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<input type="button" id="changeframe" value="Change">

<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>

Using a link - no need for jQuery (same if the button above was submitting a form, target iframename):

<a href="http://stackoverflow.com/" target="declinedframe">Change</a>

<iframe name="declinedframe" id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>

If you MUST use jQuery for the link give it the ID of changeframe use

$(function() {
  $('#changeframe').on("click",function(e) {
    e.preventDefault(); // cancel the link
    $('#declinedframe').attr('src', this.href );
  });
});

edited Apr 30, 2017 at 8:49

answered Apr 30, 2017 at 8:08

mplungjan

180k29 gold badges183 silver badges246 bronze badges

4 Comments

Noobit Over a year ago

Number 2 isn't true.

mplungjan Over a year ago

@Noobit I have changed to "may" since some browsers do not like changing the src of an already loaded frame for security reasons

Noobit Over a year ago

Just out of curiosity, which browsers stop you from changing an iframe element that exist on your page? It's not stupid IE is it? o_O

mplungjan Over a year ago

Yes - I have not tested IE11 or Edge but older IEs would not allow any manipulation of an iframe that had been loaded from a different domain. Makes sense from a security spoofing point of view

Collectives™ on Stack Overflow

Changing iframe src with jquery

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related