做前端开发的人员经常回遇到使用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下按照指定的需求正常运行。独乐乐不如众乐乐,希望以上解决思路对读者有所帮助！

Chrome和IE中使用window.open函数的更多相关文章

  1. 解决WPF中重载Window.OnRender函数失效问题

    今天实验一个绘图算法的时候,偶然发现重载Window.OnRender的方法是没有效果的. public partial class MainWindow : Window { public Main ...

  2. BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板，Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现，Firefox 和 Opera 不支持这类对象

    http://www.w3help.org/zh-cn/causes/BX2001 标准参考 无 问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板: ...

  3. js中在window.onload中写function函数产生的问题

    转载自:https://blog.csdn.net/c_p_h/article/details/63684510 今天在jsp中的form表单利用οnclick=”xxx”来监听js中一个functi ...

  4. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  5. 通过google chrome操作JavaScript中Console

    紧接着有关上一个文章的!function................. 前端开发人员一定会用到你的开发者工具中的Console控制台.通常Console用于调试程序,日志输出,打断点等功能.比如我 ...

  6. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

      body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...

  7. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  8. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  9. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

随机推荐

  1. 艺萌文件上传下载及自动更新系统(基于networkComms开源TCP通信框架）

    1.艺萌文件上传下载及自动更新系统,基于Winform技术,采用CS架构,开发工具为vs2010,.net2.0版本(可以很容易升级为3.5和4.0版本)开发语言c#. 本系统主要帮助客户学习基于TC ...

  2. .Net Core 跨平台系列之环境部署

    前言 作为一名.NET程序员,很多时候都会被什么拖控件.跨平台等字眼所鄙视过,但是在我的的内心还是没有把自己看低过.因为说到底,平台和语言只是我们吃饭的工具.很多时候公司的发展是取决于商业竞争的,微软 ...

  3. css选择符

    E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...

  4. JavaScript贷款计算器

    今天花了两个小时模仿书上代码用JS制作了JavaScript贷款计算器,时间有些长,但相比以前,自己细心了不少,每天进步一点点,量的积累达到质的飞跃 <!doctype html>< ...

  5. 如何使用.NET开发全版本支持的Outlook插件产品（三）——全面控制

    插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 进阶基础--COM查看 首先,对于Outlook对象模型,MSDN早就有非常详细的 ...

  6. jquery checkbox实例

    <!DOCTYPE html><html> <head><meta charset="utf-8" /><title>& ...

  7. nginx+tomcat+dubbo单机部署多台dubbo应用

    前面的博客已经介绍如何使用nginx+tomcat,今天做的是如何在单台服务器上如何部署多台dubbo 应用的集群. 由于在项目中遇到了这个问题,今天就把它记录下来. 1.

  8. web浏览器兼容简要整理

    ajax的创建 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr ...

  9. PCB设计规则考量之初识

    PCB的设计规则可以分布局与走线.布局里最简单的原则就是避免信号之间的干扰,有把模拟部分与数字部分分开,把开关电源与数字部分分开,把端去耦电容靠近端点,而且从端点出来的电容容值按从小到大摆放效果会好些 ...

  10. query语句的拼接.

    在外网服务器上的网页,不能排序了,原因是query语句拼接时,sort没有能拼上,. 小小的思路: 1.是不是网页请求出了问题: 和我本机上的的请求一一对比,并没有发现什么问题. 2.代码除了问题吗: ...