Firefox中iframe设置window.location.hash后重复刷新问题求助

问题现象 #

• 在Firefox 150.0.2（Mac 64位）环境下，通过window.location.hash = 'hash/value/for/section'更新iframe内页面的hash值时，会触发iframe重复刷新：进入页面后hash更新随即触发页面重载；跳转到页面其他区域时，不会直接路由到目标位置，而是从头加载页面后再定位。
• 该问题仅在Firefox中出现，Chrome可正常运行；设置hash时未添加前缀#符合规范（浏览器会自动忽略开头的#）。

可能原因 #

Firefox对iframe初始hash为空的场景（即iframe的src末尾仅为#）存在特殊处理逻辑：当首次设置非空hash时，Firefox会将其识别为页面导航操作而非单纯的hash变更，从而触发页面重载；同时hashchange事件的触发逻辑与Chrome存在差异，导致Router类中的状态判断失效，最终进入刷新循环。

解决方案 #

方案1：修正iframe初始src的hash值 #

将iframe加载时的空hash替换为默认路由的hash值，避免初始hash为空的情况：

// 原代码
src={`${window.location.origin}/zem/${accountId}?frameorigin=${window.location.origin}#`}

// 修改后
src={`${window.location.origin}/zem/${accountId}?frameorigin=${window.location.origin}#policyId/app/menu`}

让iframe加载时就拥有有效初始hash，后续更新hash时Firefox会正确识别为hash变更，而非页面导航。

方案2：调整Router的hash更新逻辑 #

显式给hash添加#前缀后再设置，消除Firefox的解析歧义，同时优化hash获取逻辑：

// 优化pushHashPath方法
function pushHashPath (path) {
    window.location.hash = `#${path}`;
}

// 优化replaceHashPath方法
function replaceHashPath (path) {
    const baseUrl = window.location.href.split("#")[0];
    window.location.replace(`${baseUrl}#${path}`);
}

// 优化getHashPath方法，直接利用浏览器API更可靠
function getHashPath () {
    const hash = window.location.hash;
    return hash ? hash.slice(1) : "";
}

方案3：优化hashchange事件处理逻辑 #

增加初始加载的判断，避免首次hash变更触发错误逻辑：

handleHashChange = (event) => {
    // 初始加载时oldURL为空，直接处理路由逻辑
    if (!event.oldURL) {
        this.trigger("HashChanged", this.getParams());
        return;
    }

    const href = event.newURL;
    const hashIndex = href.indexOf("#");
    const currentHash = hashIndex === -1 ? "" : href.substring(hashIndex + 1);
    if (this.pushSet.has(currentHash)) {
        this.pushSet.delete(currentHash);
        this.triggerEachAsync("push");
    } else if (this.replaceSet.has(currentHash)) {
        this.replaceSet.delete(currentHash);
        this.triggerEachAsync("replace");
    } else {
        this.trigger("HashChanged", this.getParams());
    }
};

总结 #

优先尝试方案1，从根源上避免Firefox对空hash的特殊处理；若方案1无法满足需求，再结合方案2和方案3调整Router逻辑，确保hash更新与事件处理在Firefox中与Chrome行为一致。

内容的提问来源于stack exchange，提问作者R.M.ARUN KUMAR