在网页中使用document.write时遭遇的奇怪问题


Posted in Javascript onAugust 24, 2010

在前些日子的对Razor模板引擎向JavaScript移植进行研究的过程中,我发现如果使用document.write输出的内容中包含了调用外部的JavaScript的<script>标记,就可能出现一点问题——在这里面被调用的外部JavaScript可能会在不适当的时间被执行,对于IE和Opera来说,就是当write的参数中的所有其它部分内容都被解析之后,这些外部的JavaScript才会执行。

而在进一步研究中我又发现,对于Chrome和Safari这两个使用了WebKit网页排版引擎的浏览器来说,如果外部调用的JavaScript中再次调用document.write来写入另一个调用外部JavaScript的<script>标记,则第二次调用的外部JavaScript不会被执行,而之后的一些内容也会被打乱——实际情况其实要稍微复杂一点,跟第二级、第三级document.write调用的参数中的具体内容有关,因为时间和精力的关系我没有办法作更具体的测试了。

在经过这些研究以后,几大主流浏览器中唯一幸存的、能正确处理所有document.write调用的,就只有Firefox了。
Firefox的一种伪“多线程”事件处理的特性一直是让我很不见待的东西,这件事也算是对“各有所长”的一个佐证吧。

想要了解这个问题所引发的种种现象,可以下载write-test.zip,解压之后用各种浏览器打开其中的write-test.htm。

这几天我一直在尝试编写一个替用函数来解决这个问题,目前已经能顺利通过上面那个链接中的测试了。
如果接下来的几天之内没有发现什么明显的问题,我会把它发在博客上供大家参考。
测试代码,打包下载

Javascript 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
JS创建对象的写法示例
Nov 04 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
javascript下string.format函数补充
Aug 24 #Javascript
javascript下利用arguments实现string.format函数
Aug 24 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 #Javascript
js null,undefined,字符串小结
Aug 21 #Javascript
javascript中的float运算精度实例分析
Aug 21 #Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 #Javascript
jquery插件之easing 动态菜单
Aug 21 #Javascript
You might like
sae使用smarty模板的方法
2013/12/17 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python 处理文件的几种方式
2019/08/23 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
通过python检测字符串的字母
2020/02/18 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
大学生就业自荐信
2013/10/26 职场文书
便利店的创业计划书
2014/01/15 职场文书
幼儿教师培训感言
2014/03/08 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书