点击链接先执行HTTP请求修改href后原生跳转的实现问题

解决方案 #

核心思路是首次点击先阻止默认跳转，等异步请求完成修改完href后，再通过标识位放行二次触发的原生点击跳转，全程不使用document.location.href重定向。

完整代码示例如下：

<a href="/initial-link" onclick="modifyHref($event)" />

<script>
function modifyHref(event) {
    const targetEl = event.target;
    // 已完成异步请求的场景直接放行跳转
    if (targetEl.dataset.requestCompleted) {
        // 重置标识位，后续点击可复用逻辑
        delete targetEl.dataset.requestCompleted;
        return true;
    }
    // 首次点击阻止默认跳转，等待异步请求完成
    event.preventDefault();
    
    httpClient.get('/my-data')
        .then(function(response) {
            // 修改a标签的href属性
            targetEl.href = "/different-link?id=" + response.data;
            // 标记请求已完成
            targetEl.dataset.requestCompleted = '1';
            // 主动触发原生点击，走a标签默认跳转逻辑
            targetEl.click();
        });
    return false;
}
</script>

实现说明 #

• 首次触发点击时直接拦截默认跳转行为，避免原始href在请求返回前被访问
• 异步请求结束后先修改href属性，再添加自定义标识位、主动触发a标签点击
• 二次触发点击时检测到标识位直接放行，此时浏览器会使用修改后的href完成原生导航，完全符合使用a元素自身属性完成跳转的需求。

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