Create an iframe on button click with jquery?

Question

i have the following code

var url = "url";
$('<iframe />', {
    name: 'frame',
    id:   'frame',
    src: url
}).appendTo('body');

but when i click the button, nothing seems to happen

user657496 · Accepted Answer · 2011-03-14 22:22:52Z

1

Make sure you don't open the same iframe again and again. Check if it exists!

$('#button').click(function() {
    if($('#myIframe').size() == 0) {
        $('<iframe id="myIframe" src="http://stackoverflow.com"></iframe>');
    }
});

answered Mar 14, 2011 at 22:22

user657496

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

5 Comments

BRampersad Over a year ago

I think i know what the problem might be. The button is a submit button, is there a way to make the page wait until the iframe loads and then continue along with the submit?

user657496 Over a year ago

Unfortunately, as of the last WebKit update, document.write() has been deprecated and there's no callback for the load of an iframe. Fortunately, brilliant users have come up with this: stackoverflow.com/questions/164085/…

BRampersad Over a year ago

I use the iframe code by itself without attaching it to the button and it definitly works so i know the problem is with the submit button.

BRampersad Over a year ago

I don't actually need a call back, just for the page to stop doing anything until the iframe loads, then it can continue with the "submit". ANy ideas?

user657496 Over a year ago

You want it all to wait until the full iframe has been loaded? That's a callback. Can you explain why you want everything to wait? Maybe there's a very easy solution.

Darin Dimitrov · Accepted Answer · 2011-03-14 22:20:35Z

1

Make sure you put this code in a document.ready:

$(function() {
    $('#someButtonId').click(function() {
        var url = "url";
        $('<iframe />', {
            name: 'frame',
            id:   'frame',
            src: url
        }).appendTo('body');    
    });
    return false;
});

Live demo.

answered Mar 14, 2011 at 22:20

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

1 Comment

BRampersad Over a year ago

I think i know what the problem might be. The button is a submit button, is there a way to make the page wait until the iframe loads and then continue along with the submit?

Peter Olson · Accepted Answer · 2011-03-14 22:21:38Z

1

The code works correctly as it is right now. The bug is probably elsewhere in the code.

http://jsfiddle.net/qrDnH/1/

answered Mar 14, 2011 at 22:21

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

Comments

Azeem · Accepted Answer · 2014-04-25 09:08:07Z

0

its very simple before click on button clear your div innerhtml where is iframe located

like this document.getElementById("mapdive").innerHTML = "";

answered Apr 25, 2014 at 9:08

Azeem

11 bronze badge

Collectives™ on Stack Overflow

Create an iframe on button click with jquery?

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related