JS拼接URL跳转功能在Firefox、Edge IE模式正常 原生Edge/Chrome失效

这个问题和jQuery版本无关，是浏览器对DOM属性的解析规则差异导致的：

• IE、Edge IE模式、旧版Firefox读取<a>元素的href property时，会直接返回标签上写入的原始路径值（也就是Html.ActionLink生成的相对路径），手动拼接?EditCode=xxx能得到正确地址。
• Chrome、原生Edge等Chromium内核浏览器中，this.href返回的是浏览器标准化处理后的完整绝对URL，原有代码存在两个致命问题：
  • 每次点击都会直接修改a标签自身的href值，第一次点击后链接就会被拼上参数，后续点击会重复追加?EditCode=xxx，生成带多个问号的非法URL；
  • 手动拼接字符串没有做任何边界处理：如果原始路径已经携带查询参数、或者路径被浏览器自动补全了特殊字符，直接拼?会直接破坏URL格式，导致跳转失效。

不要修改a标签的原始DOM属性，用标准API处理URL拼接，替换原有脚本为以下代码即可：

$(function () {
    $('#Code_Value').on('click', function (e) {
        // 阻止链接默认跳转行为
        e.preventDefault();
        // 读取标签上写入的原始href值，不受浏览器自动解析的影响
        const basePath = this.getAttribute('href');
        const inputCode = $('#EditCode').val().trim();
        // 基于当前站点域名构造合法URL对象，自动处理路径标准化
        const targetUrl = new URL(basePath, window.location.origin);
        // 通过API设置查询参数，自动完成URL编码、避免重复参数
        targetUrl.searchParams.set('EditCode', inputCode);
        // 执行跳转
        window.location.href = targetUrl.toString();
    });
});

这个写法的优势：

• 完全规避不同浏览器对href属性解析的差异，所有现代浏览器表现一致；
• 不需要手动拼接字符串，不会出现多问号、参数乱码、路径格式错误的问题；
• 不会修改a标签的原始属性，多次点击也不会出现参数重复追加的问题；
• 不需要引入额外依赖，所有现代浏览器原生支持URL对象，兼容性满足日常使用。

如果需要兼容极老旧的浏览器（比如IE11），可以用手动拼接的写法作为替代：

$(function () {
    $('#Code_Value').click(function (e) {
        e.preventDefault();
        const basePath = this.getAttribute('href');
        const inputCode = encodeURIComponent($('#EditCode').val().trim());
        // 自动判断拼接符，避免已有查询参数时格式错误
        const connector = basePath.indexOf('?') > -1 ? '&' : '?';
        window.location.href = basePath + connector + 'EditCode=' + inputCode;
    });
});

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