作者：陆远

标准参考

无

问题描述

Firefox 中的 MARQUEE 元素依赖于原生 JavaScript 的 Date.now() 方法。

造成的影响

若在代码中重写了原生 JavaScript 的 Date 对象，将导致 Date.now() 返回的不再是当前时间，这时在 Firefox 中 MARQUEE 元素将失去滚动效果。

受影响的浏览器

Firefox

问题分析

MARQUEE 不属于 W3C 规范中的元素，它最初由 IE2.0 引入，目前它已成为事实标准，所有浏览器均支持 MARQUEE 元素。

在各浏览器中查看 MARQUEE 元素的对象名称，会发现 Firefox 中与其他浏览器中有所不同：

<marquee id="m">MARQUEE</marquee> <script>
                alert(document.getElementById("m")); </script>

Firefox	IE8 Chrome Safari Opera
[HTMLDivElement]	[HTMLMarqueeElement]

可以得知，MARQUEE 元素在 Firefox 中使用 DIV 元素模拟。在 Mozilla Developer Center 中关于 MARQUEE 元素叙述中特别提到：MARQUEE 元素在 Firefox 中是以 XBL 插件的形式实现的其功能。
这个插件地址为：mxr.mozilla.org/firefox/source/layout/style/xbl-marquee/xbl-marquee.xml。

通过查看代码，可以得知，MARQUEE 元素的功能实现中使用了 JavaScript 原生的 Date 对象的静态方法 'now()'。

因此，在 Firefox 中，一旦 Date.now 被改写，MARQUEE 元素的滚动也将受到影响。

Date.now() 为 ECMAScript V5 中加入的方法（第 15.9.4.4节）。

进一步测试如下：

<style> div { width:200px; background:#DDD; } </style> <div
                id="d1"><marquee id="m1"
                behavior="alternate">111</marquee></div> <button
                id="b">Click</button> <div id="d2"> <script> var a = Date.now;
                Date.now = null; document.getElementById("b").onclick = function () { Date.now = a;
                document.getElementById("d2").innerHTML = '<marquee
                id="m2">222</marquee>'; } </script> </div>

上面的代码中，页面加载时创建了一个 MARQUEE 元素 m1，然后将 “Date.now” 方法赋给变量 “a” 后将 “Date.now” 指向 null。当按下 “Click” 按钮后，恢复原始的 “Date.now”，并再次创建了一个 MARQUEE 元素 m2。

以上代码在各浏览器中效果如下：

Firefox	IE Chrome Safari Opera

点击 “Click” 按钮后：

Firefox	IE Chrome Safari Opera

可见，在将 “Date.now()” 置为 null 后，Firefox 中的 MARQUEE 元素滚动效果消失。而在 Firefox 中恢复原有的 “Date.now()” 之后创建的MARQUEE元素则又可以滚动。

再测试一下 Firefox 中 MARQUEE 元素对 Date 对象的依赖性：

<script> var a = Date.now; Date = null; Date = {}; Date.now = a; </script> <marquee
                behavior="alternate">111</marquee>

代码中 Date 已经不是 JavaScript 原生的 Date 对象，但 “Date.now()” 仍被保留，此时在 Firefox 中仍然可以使 MARQUEE 元素出现滚动效果。

解决方案

MARQUEE 元素为非 W3C 标准元素，应尽量避免使用。同时应尽可能不对原生的 JavaScript 进行修改甚至删除。

参见

知识库

• ...

相关问题

• ...