如何让不带http/https的外部地址锚点标签正常跳转？

问题本质 #

当a标签的href值是www.google.com这种不带协议的形式时，浏览器会把它当作相对路径处理，自动拼接到当前页面的域名后面，所以会变成mydomain.com/www.google.com，自然跳不到目标外部网站。而带https://的是绝对路径，浏览器会直接识别为外部域名跳转。

解决方法 #

1. 手动修改（最直接）

直接给所有这类外部链接加上https://前缀，把：

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

改成：

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

2. JavaScript批量自动处理

如果页面上这类链接太多，没法一个个手动改，可以用JS自动补全协议：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带href属性的a标签
  const allLinks = document.querySelectorAll('a[href]');
  
  allLinks.forEach(link => {
    const currentHref = link.getAttribute('href');
    // 过滤条件：排除http/https开头、相对路径（/开头）、锚点（#开头）、邮件链接等情况
    if (currentHref && !currentHref.startsWith('http') && !currentHref.startsWith('/') && !currentHref.startsWith('#') && !currentHref.startsWith('mailto:')) {
      // 自动添加https前缀
      link.setAttribute('href', `https://${currentHref}`);
    }
  });
});

这段代码会自动识别符合条件的外部链接，给它们补上https://，点击时就会跳转到正确的外部域名。

3. 后端渲染时处理

如果页面是后端动态生成的，可以在后端逻辑里判断输出的链接是否不带协议，自动补全https://前缀，这样前端拿到的就是正确的绝对路径链接。

内容的提问来源于stack exchange，提问作者Ghasem Khalili