为什么使用javascript:"协议"的链接是不好的做法？

Question

在20世纪90年代,有一种将Javascript代码直接放入<a>href属性的方式,如下所示:

<a href="javascript:alert('Hello world!')">Press me!</a>

然后我突然停下来看它.它们全部被以下内容取代:

<a href="#" onclick="alert('Hello world!')">Press me!</a>

对于唯一目的是触发Javascript代码并且没有真正href目标的链接,为什么鼓励使用onclick属性而不是href属性？

Answer 1

执行上下文不同,要看到这一点,请尝试以下链接:

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript:在全局上下文中执行,而不是作为元素的方法,这通常是您想要的.在大多数情况下,您正在使用或与您所执行的元素相关的事情,更好地在该上下文中执行它.

此外,它更干净,但我根本不会使用内联脚本.查看任何框架,以更清洁的方式处理这些事情.jQuery中的示例:

$('a').click(function() { alert(this.tagName); });

Answer 2

实际上,这两种方法都被认为是过时的.相反,鼓励开发人员将外部JS文件中的所有JavaScript分开,以便将逻辑和代码与正版标记分开

• http://www.alistapart.com/articles/behavioralseparation
• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

这样做的原因是它创建了更易于维护和调试的代码,并且还促进了Web标准和可访问性.想象一下:看看你的例子,如果你在页面上有数百个这样的链接,并且需要alert使用外部JS引用更改其他函数的行为,你只需要更改单个事件绑定在一个JS文件中,而不是一遍又一遍地复制和粘贴一堆代码或进行查找和替换.

Answer 3

几个原因:

1. 错误的代码实践:
   HREF标记用于指示存在指向另一个位置的超链接.通过对javascript函数使用相同的标记,实际上并没有将用户带到任何地方是糟糕的编程习惯.

2. SEO问题:
   我认为网络抓取工具使用HREF标记在整个网站中抓取并链接所有连接的部分.通过输入javascript,我们打破了这个功能.

3. 打破可访问性:
   我认为一些屏幕阅读器将无法执行javascript并且可能不知道如何在他们期望超链接时处理javascript.用户希望在链接悬停时在浏览器状态栏中看到链接,同时他们会看到如下字符串:"javascript:",这可能会使他们感到困惑等.

4. 你仍然在1990年代:
   主流建议是将你的javascript放在一个单独的文件中,而不是像1990年那样与页面的HTML混合.

HTH.

Answer 4

我在新标签中打开了很多链接 - 只看到javascript:void().所以你和我自己一样烦恼(因为谷歌会看到同样的事情).

另一个原因(其他人也提到)是不同的语言应该分成不同的文件.为什么？好,

• 大多数IDE和验证器都不支持混合语言.将CSS和JS嵌入HTML页面(或其他任何内容)几乎破坏了静态检查嵌入式语言的正确性的机会.有时,嵌入语言也是如此.(PHP或ASP文档不是有效的HTML.)您不希望语法错误或不一致只在运行时显示.
• 另一个原因是要在需要指定的事物之间进行更清晰的分离:内容的HTML,布局的CSS,JS通常用于更多的布局和外观.这些不是一对一映射:您通常希望将布局应用于整个类别的内容元素(因此CSS)以及外观和感觉(因此jQuery).它们可以在内容元素改变的不同时间(实际上内容通常是在运行中生成)和不同的人改变.因此,将它们保存在单独的文档中也是有意义的.

Answer 5

使用该javascript:协议会影响可访问性，还会损害页面的 SEO 友好性。

请注意，HTML 代表 Hypter Text 某物...超文本表示其中包含链接和引用的文本，这就是锚元素的用途<a>。

当您使用javascript:“协议”时，您就滥用了锚元素。由于您滥用了该<a>元素，Google Bot 和 Jaws 屏幕阅读器之类的东西将难以“理解”您的页面，因为它们不太关心您的 JS，但非常关心超文本 ML，特别注意锚hrefs。

当未启用 JavaScript 的用户访问您的页面时，它还会影响页面的可用性；您破坏了这些用户链接的预期功能和行为。它看起来像一个链接，但它的行为不像链接，因为它使用javascript协议。

你可能会想“但是现在有多少人禁用了 JavaScript？” 但我更喜欢这样表达这个想法：“我愿意因为浏览器设置中的复选框而拒绝多少潜在客户？”

它归结为hrefHTML 属性如何，因此它属于您网站的信息，而不是其行为。JavaScript 定义了行为，但您永远不希望它干扰数据/信息。这个想法的缩影就是外部 JavaScript 文件；不用作onclick属性，而是用作 JavaScript 文件中的事件处理程序。