How do I load an url in iframe with Jquery

Question

I want to load an iframe on click, this is what I have so far:

$("#frame").click(function () { 
      $('this').load("http://www.google.com/");
    });

It doesn't work. This is the complete code: JS Bin

Do you really have to use iframes ? I am sure someone will help you how to get this done, but you should avoid iframes as much as you can. — , Aug 24 '11 at 14:28
http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice/362743#362743 — , Aug 24 '11 at 14:29
Alright then, I just mentioned so that you are doing it right, glade you found the right answer. — , Aug 24 '11 at 16:21

score 109 · Accepted Answer · edited Mar 29 '16 at 14:14

109

$("#button").click(function () { 
    $("#frame").attr("src", "http://www.example.com/");
});

HTML:

 <div id="mydiv">
     <iframe id="frame" src="" width="100%" height="300">
     </iframe>
 </div>
 <button id="button">Load</button>

edited Mar 29 '16 at 14:14

robsch

9,358
9
63
104

answered Aug 24 '11 at 14:27

Dogbert

212,659
41
396
397

7

Cross Browser restrictions wont let you do this. – Jul 04 '13 at 22:33
how would you gracefully handle errors? For example we have a report engine that generates a PDF document which we load into a hidden iframe which should automatically get the user to download it, but there's the possibility that something will go wrong and we'd like to notify the user of the problem. – Jacques Aug 15 '14 at 08:43
@Jacques: Write your own logic for your custom requirements. Above answer is perfect for OP's question. – Jitendra Pancholi Mar 07 '18 at 14:14
@Jacques How did you solve that problem ? I'm facing the same issue you've described – Jason Krs May 18 '18 at 10:48
@JasonKrs Unfortunately I don't recall since this was quite a while ago. Sorry I can't be of any help. – Jacques May 18 '18 at 14:02
@Jacques ouch... It's bugging me right now... Thank though – Jason Krs May 18 '18 at 16:47
@Dogbert I saw that answer already... I think since my frame is hosted on an Apache server, it is loaded with the 404 page... So, if the resource on the remote server is not yet available, I still get some content in `load`... Also, CORS blocked from exploring the Ajax features .... Still working on it... – Jason Krs May 19 '18 at 18:00

Chris · Answer 2 · 2014-08-27T15:56:40.140

10

Try $(this).load("/file_name.html");. This method targets a local file.

You can also target remote files (on another domain) take a look at: http://en.wikipedia.org/wiki/Same_origin_policy

edited Aug 27 '14 at 15:56

answered Aug 24 '11 at 14:26

Chris

3,729
22
30

1

The "this" in his phrase refers to the domain "www.google.com" – Manuel Nov 19 '13 at 21:19

score 9 · Answer 3 · edited Nov 13 '17 at 13:53

9

$("#frame").click(function () { 
    this.src="http://www.google.com/";
});

Sometimes plain JavaScript is even cooler and faster than jQuery ;-)

edited Nov 13 '17 at 13:53

mplungjan

169,008
28
173
236

answered Nov 11 '12 at 19:28

Christophe

27,383
28
97
140

Yes, please explain what "this" is in this context. – Alex Grande Jul 02 '13 at 16:52
@AlexGrande "this" is the same as in the question - the iframe you are clicking on. I am answering a specific question, and in this context the only element present is the iframe. – Christophe Jul 03 '13 at 09:09
sorry, I was referring to the highest of the answers indeed. – patrick Jul 03 '13 at 13:41
can we send header in calling urls? i have server side php rest that return report as html for clients. this is strange but i want to send jwt as header in calliing this page . i want to open this page as iframe in webkit. can i attach jwt to header? – saber tabatabaee yazdi May 24 '18 at 09:45
yet, you just used jQuery – Omar N Shamali Mar 19 '20 at 17:33
@OmarNShamali lol I didn't, someone decided to edit the post. As for "just", that was years ago ;-) – Christophe Mar 20 '20 at 07:01

score 5 · Answer 4 · answered Aug 10 '17 at 13:24

5

here is Iframe in view:

<iframe class="img-responsive" id="ifmReport" width="1090" height="1200" >

    </iframe>

Load it in script:

 $('#ifmReport').attr('src', '/ReportViewer/ReportViewer.aspx');

answered Aug 10 '17 at 13:24

Luqman Cheema

409
6
5

score 1 · Answer 5 · answered May 16 '16 at 15:00

Just in case anyone still stumbles upon this old question:

The code was theoretically almost correct in a sense, the problem was the use of $('this') instead of $(this), therefore telling jQuery to look for a tag.

$(document).ready(function(){
  $("#frame").click(function () { 
    $(this).load("http://www.google.com/");
  });
});

The script itself woudln't work as it is right now though because the load() function itself is an AJAX function, and google does not seem to specifically allow the use of loading this page with AJAX, but this method should be easy to use in order to load pages from your own domain by using relative paths.

How do I load an url in iframe with Jquery

5 Answers5

Linked