关于动态加载iframe
今天在用chrome调试js代码时发现,原本用意调用一次的iframe加载,实际加载了两次。
以下是我加载iframe的代码:
html代码:
<html>
<body>
...
</body>
<iframe id="iframe1" style="display: none;" src=""></iframe>
</html>
js代码:
var srcurl = "http://www.baidu.com";
$('#iframe1').attr("src", srcurl);
$('#iframe1').load(function(){
// load operation;
});
经过网上查资料,解决方案:
html中不要先写入iframe元素
<html>
<body>
...
</body>
//删除下行代码
<!-- <iframe id="iframe1" style="display: none;" src=""></iframe> -->
</html>
js:
var iframe = document.createElement("iframe");
iframe.id = "iframe1";
iframe.onload = loadOperation();
iframe.src = srcurl;
document.body.appendChild(iframe);
function loadOperation() {
// load operation;
}
ps: 解决过程中还出现了其他问题记录如下:
本来js代码是这么写的:
$("body").append("<iframe id='iframe1' style='display:none;'></iframe>");
$("#iframe1").load(srcurl, loadOperation);
function loadOperation() {
// load operation;
}
可是这么写之后,执行到loadOperation时整个body没东西了,不知道啥原因。