Chrome和IE中使用window.open函数
做前端开发的人员经常回遇到使用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函数的更多相关文章
- 解决WPF中重载Window.OnRender函数失效问题
今天实验一个绘图算法的时候,偶然发现重载Window.OnRender的方法是没有效果的. public partial class MainWindow : Window { public Main ...
- BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板，Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现，Firefox 和 Opera 不支持这类对象
http://www.w3help.org/zh-cn/causes/BX2001 标准参考 无 问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板: ...
- js中在window.onload中写function函数产生的问题
转载自:https://blog.csdn.net/c_p_h/article/details/63684510 今天在jsp中的form表单利用οnclick=”xxx”来监听js中一个functi ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- 通过google chrome操作JavaScript中Console
紧接着有关上一个文章的!function................. 前端开发人员一定会用到你的开发者工具中的Console控制台.通常Console用于调试程序,日志输出,打断点等功能.比如我 ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- 【译】在 Chrome 开发者工具中调试 node.js
原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...
- JS中的自执行函数
本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...
- 在chrome开发者工具中观察函数调用栈、作用域链与闭包
在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...
随机推荐
- 与Java互操作
课程内容涵盖了Java互操作性. Javap 类 异常 特质 单例对象 闭包和函数 变化性 Javap javap的是JDK附带的一个工具.不是JRE,这里是有区别的. javap反编译类定义,给你展 ...
- MongoDB aggregate 运用篇 个人总结
最近一直在用mongodb,有时候会需要用到统计,在网上查了一些资料,最适合用的就是用aggregate,以下介绍一下自己运用的心得.. 别人写过的我就不过多描述了,大家一搜能搜索到N多一样的,我写一 ...
- JavaEE SpringMVC 基础概念（如需详细资料请留言）
SpringMVC Web开发核心思想: 模型与视图相分离: 控制逻辑与业务逻辑相分离: 视图选择与具体视图技术相分离: 非侵入式开发(尽量少使用框架特定API),易于测试. SpringMVC是什么 ...
- C++与C的关系
C是结构化和模块化的语言,是基于过程的. C++是面向对象的程序设计语言. C++是C的超集,对C的功能做了扩充,增加了面向对象的机制. C++包含头文件的 ...
- stm8s103 PWM
stm8s103 PWM的设置不难,但是很多人不注意选项字节这个问题,PWM是IO口的第二功能,要用ST Visual Programmer 修改选项字节. 只需要修改AFR0的功能就可以了
- 在Django中进行注册用户的邮件确认
之前利用Flask写博客时(http://hbnnlove.sinaapp.com),我对注册模块的逻辑设计很简单,就是用户填写注册表单,然后提交,数据库会更新User表中的数据,字段主要有用户名,哈 ...
- js动画之多物体运动
多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...
- MFC-01-Chapter01:Hello,MFC---1.3 第一个MFC程序（01）
#include <afxwin.h> class CMyApp : public CWinApp { public: virtual BOOL InitInstance(); }; cl ...
- C++ 类模板的使用
从事C++挺久了,在前段时看书时,发现高手,都是在写模板无,泛型编程,顿感差距.自己连模板都没有写,于是就小小的研究了下模板的用法. 模板简而言之就是对某此对象的相同方法,或处理方式,进行归纳,总结, ...
- C++ 11 lambda
转载:http://www.cnblogs.com/kedebug/p/3224561.html lambda 表达式的简单语法如下:[capture] (parameters) -> retu ...