CODEWITHSUNDEEP
jquery
Hai Truong IT
Hai Truong IT

Reputation: 4187

How to create an iframe using jQuery, and display on page?

$(document).ready(function(){
    $('#button').click(function(){
       $('.accordion').load('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');
    });
});

This can't display the iframe of google.com. Can anyone provide suggestions on how to fix it?

Upvotes: 26

Views: 83350

Answers (3)

Andy Rose
Andy Rose

Reputation: 16974

jQuery's load function isn't used this way. It takes a URL as a parameter, among others, and loads the response from that URL.

If you are trying to create an iframe DOM element, use the jQuery function to do this and append it where you want:

$('<iframe src="http://google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>')
     .appendTo('.accordion');

or

$('<iframe>', {
   src: 'http://google.com',
   id:  'myFrame',
   frameborder: 0,
   scrolling: 'no'
   }).appendTo('.accordion');

Upvotes: 94

kamil
kamil

Reputation: 3522

If .accordion is a container for your iframe try this instead:

$(document).ready(function(){
$('#button').click(function(){
   $('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');
});

});

And fix that quote syntax :)

Upvotes: 4

Moe Sweet
Moe Sweet

Reputation: 3721

2 errors.

  1. Use full path (not sure it's necessary)

  2. close google.com with double quotes.

    $('.accordion').load( '< iframe src="http://www.google.com" frameborder="0" scrolling="no" id="myFrame">');

(Ignore the space in iframe tag)

Upvotes: 0

Related Questions