Chrome和IE中使用window.open函数

最新推荐文章于 2024-09-13 15:13:06 发布

转载最新推荐文章于 2024-09-13 15:13:06 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chengbing2011/p/4224588.html

文章标签：

#javascript #前端 #ViewUI

本文探讨了在不同浏览器中使用window.open函数打开新窗口并修改其内容时遇到的问题及解决方案。作者通过设置定时检查子窗口DOM加载状态的方法，实现了在IE和Chrome浏览器下的一致表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做前端开发的人员经常回遇到使用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>

View Code

父窗口中的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('');

View Code

以上这段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('');
    }

})();

View Code

经过测试以上代码可以再IE和Chrome下按照指定的需求正常运行。独乐乐不如众乐乐,希望以上解决思路对读者有所帮助！

转载于:https://www.cnblogs.com/chengbing2011/p/4224588.html