jQuery 创建 iframe 出现一个很怪的有关问题
日期：2014-05-16 浏览次数：20639 次
jQuery 创建 iframe 出现一个很怪的问题
jQuery(document).ready(function($) {
$("a[rel*=facebox]").click(function(){
var Iframess = document.createElement("div");
Iframess.width = 300;
Iframess.height = 300;
Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
document.body.appendChild(Iframess);
});
})
单击 创建出来的 iframe 是空白的!!!
下面创建出来却不是空白的!!!
jQuery(document).ready(function($) {
var Iframess = document.createElement("div");
Iframess.width = 300;
Iframess.height = 300;
Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
document.body.appendChild(Iframess);
})
请问怎么回事
------解决方案--------------------
楼主你保证第一个是创建了吗？代码是一样的，要是创建了怎么可能不显示那，我觉得就没有进入那个click函数，楼主可以打印一下东西，一样的代码，怎么会不一样的那
------解决方案--------------------
为什么没有加载那？试试别的页面可以加载吗？这个情况我还真的没有遇到过
------解决方案--------------------
没有证据.
猜测的原因:
第二种的时候, 将iframe追加到文档流中时, 文档的解析实际是没有完全完成的, 因为还在document.onready的事件中.
第一种则完全是文档加载完之后, 由用户触发创建的iframe, 可能浏览器不去主动加载,
没有经过实验...勿笑
------解决方案--------------------
以下代码在IE6, 7, 8, chrome, firefox, opera下都测试通过
jQuery(document).ready(function($) {
$("a[rel*=facebox]").click(function(){
var Iframess = document.createElement("div");
Iframess.width = 300;
Iframess.height = 300;
Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
document.body.appendChild(Iframess);
});
})
单击 创建出来的 iframe 是空白的!!!
下面创建出来却不是空白的!!!
jQuery(document).ready(function($) {
var Iframess = document.createElement("div");
Iframess.width = 300;
Iframess.height = 300;
Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
document.body.appendChild(Iframess);
})
请问怎么回事
------解决方案--------------------
楼主你保证第一个是创建了吗？代码是一样的，要是创建了怎么可能不显示那，我觉得就没有进入那个click函数，楼主可以打印一下东西，一样的代码，怎么会不一样的那
------解决方案--------------------
为什么没有加载那？试试别的页面可以加载吗？这个情况我还真的没有遇到过
------解决方案--------------------
没有证据.
猜测的原因:
第二种的时候, 将iframe追加到文档流中时, 文档的解析实际是没有完全完成的, 因为还在document.onready的事件中.
第一种则完全是文档加载完之后, 由用户触发创建的iframe, 可能浏览器不去主动加载,
没有经过实验...勿笑
------解决方案--------------------
以下代码在IE6, 7, 8, chrome, firefox, opera下都测试通过
- HTML code
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#c').click(function() {
$('body').append(
$('<div style="width: 500px; height: 300px;">').append(
$('<iframe src="http://www.baidu.com" style="width: 500px; height: 300px;">')
)
);
});
$('body').append(
$('<div style="width: 500px; height: 300px;">').append(
$('<iframe src="http://www.baidu.com" style="width: 500px; height: 300px;">')
)
);
});
</script>
</head>
<body>
<input type="button" value="click" id="c" />
</body>
</html>
------解决方案--------------------
以下代码在IE6, 7, 8, chrome, firefox, opera下都测试通过
- HTML code
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function createIframe4Standard() {
var wrapper = document.createElement('div');
var iframe = document.createElement('iframe');
wrapper.style.setProperty('width', '500px', 1);
wrapper.style.setProperty('height', '300px', 1);
iframe.style.setProperty('width', '500px', 1);
iframe.style.setProperty('height', '300px', 1);
iframe.setAttribute('src', 'http://www.baidu.com');
wrapper.appendChild(iframe);
return wrapper;
}
function createIframe4Ie() {
var wrapper = document.createElement('div');
var iframe = document.createElement('iframe');
wrapper.style.width = '500px';
wrapper.style.height = '300px';
iframe.style.width = '500px';
iframe.style.height = '300px';
iframe.src = 'http://www.baidu.com';
wrapper.appendChild(iframe);
return wrapper;
}
function createIframe() {
return document.all ? createIframe4Ie() : createIframe4Standard();
}
$(function() {
$('#c').click(function() {
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
