Question

如何使用jQuery在div中动态插入iframe？

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

我尝试了上面的代码，但它不起作用。

Answer 1

你有什么作品：http://jsfiddle.net/cUSVj/

但请记住，如果它不在同一个域中，那么在创建它之后就无法做很多事情，这是由于same-origin policy的限制所致。

编辑：我正在关闭标记，认为这是一个粘贴错误，您确实错过了/结束标记中的</iframe> ...这将/赢了根据浏览器的慷慨程度而工作。确保正确关闭它以使您的HTML有效，否则您将遇到跨浏览器问题，如果它可以开始使用。

Answer 2

您没有关闭iframe代码

<iframe>
</iframe>

Answer 3

我已经像这样使用它并且效果很好; - ）

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

Answer 4

实际的jquery代码看起来很好，你可能没有正确引用div，即

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

Answer 5

它有效，我刚测试过，你可能需要的是给jquery你要插入iframe的div的id / class

例如。（ID）

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

例如。（类）

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

Answer 6

是。它工作正常。

点击此处：http://jsbin.com/arolo3/2/edit

您应该关闭iframe代码。这可能是个问题。

Answer 7

<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>

如何在div中动态插入iframe

7 个答案: