做前端開發的人員經常回遇到使用windows.open這個函數來打開一個新的網頁窗口,使用這個函數的時候有些需要注意的地方,在Chrome和IE下該函數還是有一些細節性的區別。 以下是我在項目中使用的代碼(大概用法):
Download.html的代碼如下:
<!DOCTYPE html> <html> <head> <title>Test Window</title> </head> <body> <div id='main_body' style="width: 100%; height: 100%"></div> </body> </html>
父窗口中的Javascript代碼如下:
var promptWnd=window.open("Download.html); var divHtml=[]; divHtml.push('<div>This is first divsection</div>'); divHtml.push('<div>This is second divsection</div>'); promptWnd.document.getElementById("main_body").innerHTML = divHtml.join('');
以上這段Javascript代碼在IE中運行正常(至少我測試是正常運行的),但是在Chrome中使用就有問題了,在Chrome中子窗口彈出來了,但是無法將div添加到子窗口中。
使用alert(promptWnd.document.getElementById("main_body")),發現輸出的為null。
因此,我大膽的推測,window.open函數在IE和Chrome中實現方式是不一樣的,IE中是同步執行的,也就是說在IE中子窗口的Dom元素加載完成才返回；而在Chrome中則是 異步執行的,也就是說Chrome不會等子窗口中的Dom元素加載完才返回。
根據這種推測,通過返回的promptWnd句柄是不可以操作子窗口的Dom元素的[因為子窗口的Dom 元素沒有加載完成]。
我的解決方案如下[使用setInterval函數檢查Dom元素是否加載成功],代碼如下:
var interval=null; var promptWnd=window.open("Download.html); var divHtml=[]; divHtml.push('<div>This is first divsection</div>'); divHtml.push('<div>This is second divsection</div>'); function checkDomReady() { var result = promptWnd.document.getElementById("main_body") == null ? false : true; if (result == true) { clearInterval(interval); promptWnd.document.getElementById("main_body").innerHTML = divHtml.join(''); } }; (function checkWndReady() { if (promptWnd.document.getElementById("main_body") == null) { checkDomReady(); interval = setInterval(checkDomReady, 1000); } else { promptWnd.document.getElementById("main_body").innerHTML = divHtml.join(''); } })();
經過測試以上代碼可以再IE和Chrome下按照指定的需求正常運行。獨樂樂不如眾樂樂,希望以上解決思路對讀者有所幫助！