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

在前些日子的对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。

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

赞 (0)

相关推荐

  • JavaScript中使用document.write向页面输出内容实例

    document.write 命令向页面输出文字 本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字,代码如下: 复制代码 代码如下: <script type="text/javascript"> document.write("我是向页面输出的文字!"); </script> 将上面部分代码,用文本编辑器保存为 write.html(或 write.htm).双击 write.html 运行它(实

  • 用js的document.write输出的广告无阻塞加载的方法

    用js的document.write输出的广告无阻塞加载的方法

    一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java

  • document.write的几点使用心得

    一直用document.write()方法向浏览器中显示数据用,把它当做Alert()使用, 看来这样用有些大材小用了,下面说说它的主要用处. document.write()方法可以用在两个方面: 1.页面载入过程中,用脚本加入新的页面内容. 2.用延时脚本创建本窗口或新窗口的内容. 该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言.如下面代码,教务系统框架载入子页 复制代码 代码如下: <!--将框

  • document.write()及其输出内容的样式、位置控制

    JS中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容--document.write("content"),这里content就是需要输出的内容:当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量. 既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式.第一种控制方法是应用内部添加样式的方法,比如 doc

  • 深入document.write()与HTML4.01的非成对标签的详解

    (一)HTML4.01中的非成对标签:注释标签:<!-- 注释内容  --> 严格来讲不算HTML标签的:<!DOCTYPE>文档声明标签 设置页面元信息的:<meta>标签 设置网页所有链接的相对目录(如根目录)的:<base>标签 换行:<br> 水平线:<hr> 图像:<img> 表单元素<input> 在表格table中定义一个或多个列的属性的:<col>标签 定义框架的一个窗口的:<

  • document.write与writeln的输出内容区别说明

    document.write与writeln的输出内容区别说明

    document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符 document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行 document.write()和document.writeln都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别,除非是输出到pre或xmp元素内 测试一下: with(window.open()){

  • js中document.write使用过程中的一点疑问解答

    本人是新手,所以就记录下来了.这个答案是在百度中看到的,所以算是转载. 下面的内容解答了何为如果在页面加载完后如果调用document.write就会覆盖整个文档. 提示中的 [HTML 输出中] 指的是当页面加载的时候. 复制代码 代码如下: <html> <head></head> <body> <script type="text/javascript">document.write("<p>Hel

  • js document.write()使用介绍

    在载人页面后,浏览器输出流自动关闭:在此之后,任何一个对当前页面进行操作的document.write()方法将打开-个新的输出流.它将清除当前页面内容(包括源文档的任何变量或值).因此．假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量.使用一个document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作. 关于document.write()方法还有一点要说明的是它的相关方法docu

  • js中document.write的那点事

    记住,在载入页面后,浏览器输出流自动关闭.在此之后,任何一个对当前页面进行操作的document.write()方法将打开-个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值).因此,假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量,使用一个document.write()方法完成写操作.不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作. 关于document.write()方法还有一点要说明的是它的相关方法d

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

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

  • jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=

  • 关于网页中的无缝滚动的js代码

    关于网页中的无缝滚动的js代码

    随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c

  • 基于JS实现网页中的选项卡（两种方法）

    网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容. 方法一: 方法一利用简单的代码即可实现,以下是全部的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;}

  • JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序

    看到网上这个程序 发现了处错误这里改正了一下: function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 11, 30, 23, 59, 59); /*转换成秒*/ var time = (date2 - date) / 1000; var day = Math.floor(time / (24 * 60 * 60)) var hour = Math.

  • .net开发中批量删除记录时实现全选功能的具体方法

    1 . JS实现全选 往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码 复制代码 代码如下: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"    DataSourceID="SqlD

  • 基于iframe实现ajax跨域请求 获取网页中ajax数据

    基于iframe实现ajax跨域请求 获取网页中ajax数据

    大家都知道,在不同域的情况下是不能发送ajax请求的,浏览器会报如下错误: 同时,内嵌的iframe中无法进行跨域通信的,也就是说不同域的iframe是无法互相读取数据的(当然利用hash变化可以从父window传入数据到子iframe,不过并没有什么意义).iframe跨域通信时,浏览器会报如下错误: 其实这两个问题都是由于跨域造成的. 下面就介绍如何解决这个问题. 其实问题的关键就在于,浏览器在解析ajax请求地址时会和当前网页的地址进行比较,如果是跨域的,那就禁止掉并且报错.那么我们如果让

  • JavaScript在网页中画圆的函数arc使用方法

    JavaScript在网页中画圆的函数arc使用方法

    一.arc所需要的参数设置 复制代码 代码如下: arc(x, y, radius, startAngle, endAngle, counterclockwise); 其中x,y,radius都很容易理解,那么重点说说startAngle,endAngle和counterclockwise三个参数! 二.arc参数详解 1,startAngle和endAngle分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为0,结束的角度为Math.PI*2,这样正好画一个圆 2,下面通过实例来讲解s

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • 网页中嵌入Flash的方法讨论

    Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等.讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了. 一.传统的方法 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"    codebase="http://fpdownload.macromedia.com/pub/shockwave/ca

随机推荐