Firefox中javascript链接点击后显示空白页含true的异常问题咨询

这是个挺典型的浏览器行为差异问题，咱们来拆解清楚：

现象产生的原因 #

当你使用 <a href="javascript:helloWorld()"> 这种带有javascript:伪协议的链接时，浏览器的处理逻辑是：

• 执行javascript:后面跟着的代码
• 把代码的返回值当作新页面的内容去渲染（替换当前页面）

你的helloWorld()函数最后明确定义了return true;，所以Firefox会把这个返回值"true"作为新页面的内容展示出来，就出现了那个显示"true"的空白页。

而Chrome的处理逻辑做了优化：它会忽略javascript:链接的普通返回值（比如布尔值、字符串这类），只有当返回值是DOM节点等特殊类型时才会渲染，所以不会出现跳转显示新页面的情况。

属于预期行为还是Bug？ #

这不算Bug，属于不同浏览器厂商对早期Web规范的差异化实现。早期的HTML标准对javascript:伪协议的返回值处理没有做非常严格的统一规定，各浏览器根据自己的理解做了实现——Firefox的行为更贴近早期浏览器的处理方式，而Chrome则是结合现代前端开发的使用习惯做了调整，两者都符合规范的弹性空间。

已验证的解决方案（及其他可选方案） #

你已经用到的href="helloWorld();void(0);"是非常经典且有效的解决方法：void(0)执行后会返回undefined，浏览器拿到这个返回值后就不会替换当前页面内容了。

另外还有几种常用的替代方案：

• 直接使用href="javascript:void(0)"，点击时执行空操作，无返回值
• 结合onclick事件和阻止默认行为：

  <a href="#" onclick="helloWorld(); return false;">Hello world</a>
  

• 更现代的事件监听写法（完全脱离javascript:伪协议，更符合前端最佳实践）：

  <a id="hello-link">Hello world</a>
  <script type="text/javascript">
    function helloWorld(){
      console.log("Hello world");
      return true;
    }
    document.getElementById('hello-link').addEventListener('click', function(e) {
      e.preventDefault(); // 阻止链接的默认跳转行为
      helloWorld();
    });
  </script>
  

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