没有 http(s) 前缀的 Href答案

【问题标题】：Href without http(s) prefix没有 http(s) 前缀的 Href
【发布时间】：2017-10-03 20:47:56
【问题描述】：

我刚刚创建了原始的 html 页面。这是：example 这是它的标记：

<a href="www.google.com">www.google.com</a>
<br/>
<a href="http://www.google.com">http://www.google.com</a>

如您所见，它包含两个链接。第一个的 href 没有“http”前缀，当我单击此链接时，浏览器会将我重定向到不存在的页面 https://fiddle.jshell.net/_display/www.google.com。第二个的 href 具有此前缀，并且浏览器会生成正确的 url http://www.google.com/。是否可以使用诸如www.something.com 之类的href，而不使用http(s) 前缀？

【问题讨论】：

标签： html href

【解决方案1】：

您可以通过在路径前使用// 来省略协议。这是一个例子：

<a href="//www.google.com">Google</a>

通过使用//，您可以告诉浏览器这实际上是一个新的（完整的）链接，而不是一个相对的（相对于您当前的链接）。

【讨论】：

此外，如果您的网站在 https 上运行，则链接也将是 https，如果您的网站在 http 上运行，则链接将是 http。

【解决方案2】：

这是可能的，而且您现在确实正在这样做。它只是没有做你认为它做的事情。

考虑当你链接到这个时浏览器会做什么：

href="index.html"

当你链接到这个时它会做什么？：

href="index.com"

还是这个？：

href="www.html"

或者？：

href="www.index.com.html"

浏览器不知道你是什么意思，它只知道你告诉它什么。如果没有前缀，它将遵循当前 HTTP 地址的标准。前缀告诉它它需要完全从一个新的根地址开始。

请注意，您不需要 http: 部分，您可以这样做：

href="//www.google.com"

浏览器将使用任何当前协议（http、https 等），但 // 告诉它这是一个新的根地址。

【讨论】：

“浏览器将使用当前协议是什么”是什么意思。不幸的是，当我为仅针对 http 运行的 url 执行此操作时，它会在 https 中打开它，这不起作用。有没有办法解决这个问题？
@ZeeshanAdil：用于打开包含被点击链接的任何页面的当前协议。因此，如果页面是通过 HTTP 访问的，除非另有说明，否则链接将默认为该页面。如果它是通过 HTTPS 访问的，除非另有说明，否则链接将默认为该链接。解决方法是在链接中指定协议（如果需要是特定协议）。
html 文档中提到 // 的地方。我对此一无所知（但它有效）

【解决方案3】：

就 SEO 而言，仅在路径前使用 // 来省略协议是一个非常糟糕的主意。好的，大多数现代浏览器都可以正常工作。另一方面，大多数机器人在扫描您的网站时会遇到麻烦。 Masjestic 不会计算来自这些链接的流量。审核工具（如 SEMrush）将无法执行其工作

【讨论】：

【解决方案4】：

我在 React 项目中创建了一个可以帮助你的小函数：

const getClickableLink = link => {
    return link.startsWith("http://") || link.startsWith("https://") ?
      link
      : `http://${link}`;
  };

你可以像这样实现它：

const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>

【讨论】：