为什么使用JavaScript“协议”的链接是不好的做法?

当我们需要在网页中添加一个跳转链接时,常常会使用类似于以下代码的语法:

-- -------------------------------- --------

这里的 javascript:void(0); 就是使用了 JavaScript “协议”(Protocol)的链接。虽然这种方式看起来很方便,但是实际上它存在一些问题,本文将详细介绍。

1. SEO 不友好

搜索引擎优化(SEO)是网站排名和流量的一个重要因素。而使用 JavaScript “协议”的链接会对 SEO 产生不良影响,因为搜索引擎无法正确地解析这种链接。

比如,下面这个链接:

-- ------------------------------ ---------------- ------

实际上并没有指定任何有效的 URL 地址,因此搜索引擎就无法对其进行处理,也就无法为该链接提供链接权重(Link Juice)等优化效果。

2. 破坏浏览器前进/后退功能

当用户点击一个 JavaScript “协议”的链接时,并不会像点击一个普通的链接那样,在浏览器的历史记录中留下记录。这就导致用户不能通过浏览器的前进和后退按钮返回之前的页面,这对于用户体验来说是非常不友好的。

3. 安全性问题

使用 JavaScript “协议”链接还会带来一些潜在的安全风险。因为任何人都可以在这种类型的链接中插入任何类型的脚本代码,比如:

-- ---------------------------- ------- --- ---- ----------------- ---- -- ---- ---- -----------

这样的链接看起来似乎是指向了用户的个人信息页面,但实际上却是一个欺骗用户的恶意链接,并可能导致用户个人信息泄露。

4. 可维护性差

在使用 JavaScript “协议”链接时,我们往往会将脚本内容直接写在 href 属性中,这会导致代码的可读性和可维护性大大降低。特别是当我们需要修改链接行为时,就需要重写整个链接,这样就很容易出现错误。

替代方案

那么,有没有一种更好的方式来替代 JavaScript “协议”链接呢?答案是肯定的。以下是一些可行的替代方案:

  • 使用合法的 URL 地址:使用正确的 URL 地址可以避免 SEO 和浏览器历史记录等问题。
  • 使用按钮或其他互动元素:如果你需要添加一些交互功能,可以使用按钮或其他交互元素来代替链接。
  • 使用事件绑定机制:可以使用 JavaScript 的事件绑定机制来绑定一个函数到一个 HTML 元素上,从而实现交互功能。

下面是一个例子,演示如何通过事件绑定机制来实现点击跳转:

-- ----------- -------------- --------

--------
  ----- ------ - ----------------------------------
  -------------------------------- --------------- -
    ----------------------- -- ------
    -------------------- - ---------------------------
  ---
---------

这段代码在用户点击链接时会阻止默认行为,然后执行指定的跳转操作,从而避免了 JavaScript “协议”链接所带来的问题。

结论

使用 JavaScript “协议”的链接可能会导致多种问题,包括 SEO 不友

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/15559