How do I set the src to an iframe with jQuery?

Question

My iFrame looks like this:

<iframe id="iframe" name="iframe1" frameborder="0" src=""></iframe>

And my script looks like this:

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src',http://google.com);
})
</script>

I've also tried putting quotes around the url:

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src','http://google.com');
})
</script>

But neither is working.

What am I missing?

Are you getting any errors from the browser? – rjg132234 Jun 06 '13 at 20:23 — rjg132234, Jun 06 '13 at 20:23
http://jsfiddle.net/SLaks/8JKxh/ – SLaks Jun 06 '13 at 20:25 — SLaks, Jun 06 '13 at 20:25

score 20 · Accepted Answer · answered Jun 06 '13 at 20:24

20

If you look at the browser's error console, you'll see the real problem:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Google doesn't let you do that.

answered Jun 06 '13 at 20:24

SLaks

800,742
167
1,811
1,896

2

This is the right answer. It works when used with another URL. I tried disney.com and it worked fine (once height/width attributes were added). – Tim Wasson Jun 06 '13 at 20:25
@SLaks - Is that from google's meta tag: ``? – Travis J Jun 06 '13 at 20:26
Yes, Firefox is giving me a similar error: `Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing.` Proof: http://jsfiddle.net/7vuB4/ – nullability Jun 06 '13 at 20:33
@TravisJ: No; it's due to the `X-Frame-Options` HTTP header. https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options – SLaks Jun 06 '13 at 20:47

score 9 · Answer 2 · answered Jun 06 '13 at 20:22

9

<script type="text/javascript">
    $(document).ready(function() {
    $('#iframe').attr('src', 'http://google.com');
})
</script>

Quotes missing on the url.

answered Jun 06 '13 at 20:22

rjg132234

580
3
6
20

Hey, sorry I just edited it to include that. That isn't working either. – Alex Jun 06 '13 at 20:23
Do you have the full code? And is your browser giving you an error? – rjg132234 Jun 06 '13 at 20:25

score 4 · Answer 3 · answered Jun 06 '13 at 20:25

4

You're not allowed to load www.google.com in an iFrame. Try it with another url.

Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing.

answered Jun 06 '13 at 20:25

ChrisGheen

904
6
14

score 3 · Answer 4 · answered Mar 13 '14 at 06:48

3

$("#iframe").attr("src","your url");

this will work fine.

answered Mar 13 '14 at 06:48

user3332446

69
1
8

score 1 · Answer 5 · answered Jun 06 '13 at 20:24

Just call the function with Iframe name and desired url

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

Ex:

loadIframe("iframe1","http://yahoo.com");

How do I set the src to an iframe with jQuery?

5 Answers5

Linked