在网页中使用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 相关文章推荐
JS继承用法实例分析
Feb 05 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
js面向对象方式实现拖拽效果
Mar 03 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
php生成与读取excel文件
2016/10/14 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
STP的判定过程
2012/10/01 面试题
中文系师范生自荐信
2013/10/01 职场文书
关于迟到的检讨书
2014/01/26 职场文书
留学自荐信写作方法
2014/01/27 职场文书
大学生军训感想
2014/02/16 职场文书
部队党性分析材料
2014/02/16 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技