html-为什么将不正确的链接与javascript:“协议”一起使用?

在1990年代,有一种将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属性?

zneak asked 2020-02-12T13:59:39Z
10个解决方案
51 votes

执行上下文不同,要查看此内容,请尝试以下链接:

<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); });
Nick Craver answered 2020-02-12T13:59:57Z
18 votes

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

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

这样做的原因是它创建了易于维护和调试的代码,并且还提高了Web标准和可访问性。 像这样思考:在您的示例中,如果您在页面上有成百上千个这样的链接,并且需要使用外部JS引用将其他功能更改为alert,该怎么办,您只需要更改一个事件即可 绑定到一个JS文件中,而不是一遍又一遍地复制和粘贴一堆代码,或者进行查找和替换。

Levi Hackwith answered 2020-02-12T14:00:33Z
10 votes

几个原因:

  1. 错误的代码做法:
    HREF标签用于指示存在指向另一个位置的超链接引用。 通过对javascript函数使用相同的标签实际上不会将用户带到任何地方,是不好的编程习惯。

  2. SEO问题:
    我认为网络爬虫使用HREF标记来爬网整个网站并链接所有连接的部分。 通过使用javascript,我们破坏了此功能。

  3. 破坏可访问性:
    我认为某些屏幕阅读器将无法执行javascript,并且可能会在期望超链接时不知道如何处理javascript。 用户将希望在链接悬停时在浏览器状态栏中看到一个链接,而他们将看到诸如“ javascript:”之类的字符串,这可能会使它们混淆。

  4. 您仍然处于1990年代:
    主流建议是将您的JavaScript放在单独的文件中,而不要像1990年代那样与页面的HTML混合在一起。

HTH。

Sunny answered 2020-02-12T14:01:34Z
6 votes

我在新标签页中打开了很多链接-只能看到javascript:void()。 因此,您和我以及您自己都惹恼了我(因为Google会看到同样的事情)。

另一个原因(也有人提到)是不同的语言应分为不同的文档。 为什么? 好,

  • 不能很好地支持混合语言由大多数IDE和验证器提供。将CSS和JS嵌入HTML页面(或其他与此相关的内容)几乎摧毁了检查嵌入式语言的正确性静态地。 有时,嵌入语言也是如此。(PHP或ASP文档不是有效的HTML。)你不想要语法出现错误或不一致仅在运行时。
  • 另一个原因是,你需要的东西指定:HTML用于内容,CSS用于布局,JS通常用于更多布局和外观。 这些不映射一对一:您通常想申请布局到整个类别内容元素(因此称为CSS)以及外观和感觉(因此jQuery)。 他们可能会有所不同内容元素更改的次数(实际上内容通常是即时生成的)不同的人。 所以把它们留在里面很有意义以及单独的文件。
reinierpost answered 2020-02-12T14:02:09Z
4 votes

简短答案:内联Javascript不好是因为内联CSS不好。

leepowers answered 2020-02-12T14:02:29Z
4 votes

使用href协议会影响可访问性,并且还会损害您的页面对SEO的友好程度。

请注意,HTML代表“ Hypter Text”是某种东西……“超文本”表示其中包含链接和引用的文本,这是锚元素href所使用的。

当您使用href'protocol'时,您在滥用锚元素。 由于您在滥用2744391233475975970049元素,因此诸如Google Bot和Jaws Screen阅读器之类的东西将无法“理解”您的页面,因为它们不太在乎您的JS,但在乎超文本ML,请特别注意 锚hrefs的角度。

当未启用JavaScript的用户访问您的页面时,它也会影响页面的可用性。 您将破坏这些用户预期的链接功能和行为。 它看起来像一个链接,但它不会像一个链接那样工作,因为它使用href协议。

您可能会想:“但是现在有多少人禁用了JavaScript?” 但我想用“如果由于浏览器设置中的复选框,我愿意拒绝多少潜在客户?”来表达这个想法。

归结为href是HTML属性的方式,因此它属于您网站的信息,而不是其行为。 JavaScript定义了行为,但是您从不希望它干扰数据/信息。 这个想法的缩影将是外部JavaScript文件。 不会将onclick用作属性,而是将其用作JavaScript文件中的事件处理程序。

Richard JP Le Guen answered 2020-02-12T14:03:13Z
3 votes

最严重的问题可能是它破坏了预期的功能。
例如,正如其他人指出的那样,在新窗口中打开/选项卡=无效链接=惹恼/困惑的用户。

我总是尝试改用onclick,并在页面的URL哈希中添加一些内容以指示所需的函数来触发,并在pageload中添加检查以检查哈希并触发函数。

这样,您获得的点击,新标签页/窗口甚至书签/已发送链接都具有相同的行为,而且如果JS关闭,事情也不会变得古怪。

换句话说,是这样的(非常简化):

对于链接:

onclick = "doStuff()"

href = "#dostuff"

对于页面:

onLoad = if(hash="dostuff") doStuff();
MatsSvensson answered 2020-02-12T14:04:01Z
2 votes

另外,只要我们谈论过时和语义,可能值得指出的是“ 2744392768104104784784”并不意味着“可点击”,而是“锚定”,并且意味着链接到另一个页面。 因此,使用该标记在您的应用程序中切换到另一个“视图”是有意义的,而不是执行计算。 您的href属性中没有URL的事实应表明您不应该使用锚标记。

您也可以将点击事件操作分配给几乎所有html元素-也许<h1><img><p>更合适? 无论如何,正如其他人提到的,添加另一个属性(也许是“ id”),JavaScript可以将其用作“挂钩”(document.getElementById)来获取元素并分配onclick。 这样,您就可以将内容(HTML)表示(CSS)和交互性(JavaScript)分开。 世界不会终结。

matt lohkamp answered 2020-02-12T14:04:27Z
2 votes

我通常会有一个名为“ EnableJavascript.htm”的登录页面,上面有一条大消息,上面写着“必须启用Javascript才能使此功能正常工作”。 然后像这样设置我的锚标签...

<a href="EnableJavascript.htm" onclick="funcName(); return false;">

这样,锚点有一个合法的目的地,只要有可能,它将被您的Javascript功能覆盖。 这将正常降级。 尽管现在已经有几天了,但在决定添加一些Javascript之前,我通常会构建具有完整功能的网站(这完全消除了对此类锚点的需要)。

在标记中直接使用onclick属性是另一个主题,但是我建议对jQuery之类的库采取不引人注目的方法。

Josh Stodola answered 2020-02-12T14:04:57Z
1 votes

我认为这与用户在状态栏中看到的内容有关。 通常,应在未启用javascript的情况下构建用于故障转移的应用程序,但情况并非总是如此。

随着所有垃圾邮件的不断涌现,人们变得越来越聪明,当电子邮件看起来“混乱”时,越来越多的人正在查看状态栏,以查看链接实际将它们带到何处。

记住添加“ return false”; 到链接的末尾,因此页面不会跳到用户顶部(除非这是您要查找的行为)。

RDL answered 2020-02-12T14:05:26Z
translate from https://stackoverflow.com:/questions/2479557/why-is-it-bad-practice-to-use-links-with-the-javascript-protocol