CODEWITHSUNDEEP
javascriptjquery
user370306
user370306

Reputation:

How do I dynamically insert an iframe in a div

How do I dynamically insert an iframe in a div using jQuery?

$(document).ready(function() {
    $("div").html("<iframe src='http://google.com'><iframe>");  
});

I tried the above code, but it doesn't work.

Upvotes: 19

Views: 61167

Answers (7)

jeroen
jeroen

Reputation: 41

I've used it like this and it works well ;-)

$(".div").html("<iframe width='850' height='450' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://yourlocation.com'></iframe>");  
$(".div").css("display","block");

Upvotes: 4

Flakron Bytyqi
Flakron Bytyqi

Reputation: 3254

It works, I just tested it, what you might need is give jquery the id/class of the div you want to insert the iframe

eg. (id)

$("#myDiv").html("<iframe src='http://google.com'></iframe>");

eg. (class)

$(".myDiv").html("<iframe src='http://google.com'></iframe>");

Upvotes: 0

Krunal
Krunal

Reputation: 3531

Yes. It is working fine.

Check here : http://jsbin.com/arolo3/2/edit

You should close the iframe tag. It might be the issue.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630339

What you have works: http://jsfiddle.net/cUSVj/

Though keep in mind you can't do much with it after it's created if it's in not in the same domain, this is due to restrictions in place per the same-origin policy.

Edit: I was closing the tag thinking it was a paste error, you are indeed missing a / in your </iframe> closing tag...this will/won't work depending on how generous the browser is. Make sure to close it correctly so your HTML is valid, otherwise you'll have cross-browser issues, if it works to begin with.

Upvotes: 17

Tommy
Tommy

Reputation: 39807

<html>

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


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


</script>
<p>An IFrame should appear here</p>
<div id="frameDiv" style="width: 400px; height: 400px;"></div>

</body>

Upvotes: 0

bodee
bodee

Reputation: 2674

you did not close the iframe tag

<iframe>
</iframe>

Upvotes: 7

James
James

Reputation: 82096

The actual jquery code looks fine, you may not be referencing the div correctly i.e.

#div - would be an element with the id "div"
.div - would be an element with the class "div"

Upvotes: 2

Related Questions