@HostListener在Firefox中失效但Chrome、Edge可正常运行问题求助

核心原因 #

window:loadurl并非标准DOM事件，Chrome和Edge可能对这个非标准事件有特殊支持，但Firefox并未实现该事件的监听机制，导致代码在Firefox中无法触发回调。另外你的代码存在逻辑错误：path[1]是直接取完整URL字符串的第二个字符，而非拆分后的路径片段，这会导致路径判断完全失效。

修复方案 #

方案1：改用Angular路由标准监听（推荐） #

如果是单页应用的路由切换场景，直接用Angular自带的Router监听路由变化，是跨浏览器兼容的最优方案：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    const urlPath = event.urlAfterRedirects;
    if (urlPath.includes('/address')) {
      // 执行地址组件加载逻辑
    } else if (urlPath.includes('/marks')) {
      // 执行成绩组件加载逻辑
    }
  });
}

方案2：修复自定义事件的Firefox兼容（若必须使用loadurl事件） #

如果loadurl是你自定义的事件，需要同时修正路径处理逻辑和事件触发方式：

1. 修正路径处理代码：

@HostListener("window:loadurl", ["$event"])
onLoadUrl(event) {
  try {
    // 用原生URL对象解析路径，避免手动拆分出错
    const url = new URL(event.target.location.href);
    const pathname = url.pathname;
    
    if (pathname.includes("/address")) {
      // 加载地址组件
    }
    if (pathname.includes("/marks")) {
      // 加载成绩组件
    }
  } catch (err) {
    console.error('URL处理失败:', err);
  }
}

2. 确保触发自定义事件时使用标准API（Firefox对自定义事件触发有严格要求）：

// 触发loadurl事件的代码需改为以下格式
window.dispatchEvent(new CustomEvent('loadurl', { 
  detail: { /* 按需传递额外数据 */ } 
}));

额外注意事项 #

• 优先依赖框架或浏览器标准API，避免使用非标准事件，从根源保证跨浏览器兼容性
• 处理URL时推荐使用原生URL对象，比手动拆分字符串更可靠且不易出错

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