關於動態載入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沒東西了,不知道啥原因。