gpt4 book ai didi

javascript - HTML4 中的 Element.animate()

转载 作者:太空宇宙 更新时间:2023-11-04 13:53:21 27 4
gpt4 key购买 nike

Chrome 的人似乎有 appropriated Element.animate()为他们自己,使用类似 onclick="animate();" 的方式有效地破坏所有现有的 HTML 页面。

这对于符合 HTML 4/Transitional 规范的浏览器是否合法?这是 W3C 正式拥有权限的事情吗?

小型网站所有者是否可以采取任何措施来防止此类进一步违规行为?

编辑:测试用例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function animate() {
alert('this should work');
}
</script>
</head>
<body>
<input type="button" onclick="animate();" value="push me!">
</body>
</html>

导致 Uncaught TypeError: Failed to execute 'animate on 'Element': 1 argument required, but only 0 present. 在 Chrome 上,但在 FireFox 中有效。

最佳答案

您所指的更改不是 Google 的单方面行动,而是 draft W3C standard called Web Animations 1.0 的一部分。 .您遇到麻烦的具体修改是 the extension to the DOM Element interface它添加了三个新方法,包括 animate():

Since DOM Elements may be the target of an animation, the Element interface [DOM4] is extended as follows: Element implements Animatable;

This allows the following kind of usage. elem.animate({ color: 'red' }, 2000);

这里的DOM代表“文档对象模型”,即another standard, separate from HTML它定义了 JavaScript 和其他语言应该如何公开 HTML、XML 或类似文档并与之交互。多年来,该标准进行了多次扩展,因此将这种新方法添加到 Element 对象绝不是史无前例的,也绝不可能引起争议。


您的具体问题是命名空间冲突之一。 JavaScript 的范围规则在任何情况下都相对复杂,当您在 HTML 属性中嵌入事件处理程序时,会有一些特殊的逻辑,如 this MDN article about "event attributes" 中所述。 .

结果是,当您编写 onclick="animate();" 时,animate 会在多个范围或命名空间中作为属性进行查找,包括:

  • 作为被点击元素的属性,已绑定(bind)到this;如果找到,animate() 的行为与 this.animate()
  • 相同
  • 作为全局 window 对象的属性,在任何情况下它始终是最后检查的范围;因此,如果没有找到其他任何东西,animate() 将等同于 window.animate()

你的问题是你依赖于从全局命名空间调用的东西,但是对 DOM 的更改意味着它现在也在 this 上定义(具体来说,它在原型(prototype)中Element 的所有后代)。由于新函数优先于现有函数,因此会发生意外的行为变化。

因此,对您的代码进行最简单的修复是更具体地限定您的事件,如 onclick="window.animate();"。您不仅应该对您知道现在有冲突的方法和变量执行此操作,还应该对所有这些方法和变量执行此操作,这样它们就不会受到将来 DOM 的其他更改的影响。 ( Here is a demo of that approach .)


但是,如果您想让代码更健壮,则应该进行更广泛的更改以使其符合最新的编码实践:

  • 与其使用“事件属性”(例如 onclick),不如以编程方式添加事件监听器。现代 API 是 addEventListener , 虽然很多人更喜欢像 jQuery 这样的图书馆这使得使用不同的浏览器变得更加容易,并简化了常见任务(在这种情况下,您将使用 the .on() method )。
  • 与其将函数置于全局范围内,不如将它们设为某个对象的属性,以便您可以跟踪自己的命名空间。更好的是,如果您将它们与 HTML 分开(使用类似 addEventListener 或 jQuery 的 .on),您可以将它们设为私有(private)变量,使用 IIFE 甚至无法从全局范围访问(一个仅用于创建新变量范围的封闭函数)。

关于javascript - HTML4 中的 Element.animate(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24871067/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com