IE11中URL对象报错“Object doesn't support this action”的兼容方案咨询

没错，IE11确实不支持原生的URL构造函数，这也是老浏览器常见的兼容性问题，我给你几个靠谱的解决办法：

方法一：手动解析URL参数 #

如果你的需求只是提取URL里的查询参数，完全可以自己写个轻量的解析函数，不依赖原生API：

function parseUrlParams(url) {
  const params = {};
  // 提取问号后的查询字符串部分
  const queryStr = url.split('?')[1] || '';
  // 分割每个键值对
  const paramPairs = queryStr.split('&');
  
  paramPairs.forEach(pair => {
    const [key, value] = pair.split('=');
    if (key) {
      // 解码URL编码的特殊字符
      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
    }
  });
  
  return params;
}

// 使用示例
const urlStr = "http://www.testsite.com?name=abc&class=123";
const params = parseUrlParams(urlStr);
console.log(params.name); // 输出 "abc"
console.log(params.class); // 输出 "123"

方法二：添加Polyfill（垫片） #

如果需要完整的URL对象功能，可以给IE11补一个垫片，模拟原生URL的核心能力。你可以在代码开头加入这段无依赖的垫片：

// 仅在IE11等不支持URL的浏览器中生效
if (!window.URL) {
  window.URL = function(url, base) {
    const a = document.createElement('a');
    // 处理带base的URL解析
    if (base) {
      a.href = base;
      a.href = url;
    } else {
      a.href = url;
    }
    
    // 映射URL对象的核心属性
    this.href = a.href;
    this.protocol = a.protocol;
    this.host = a.host;
    this.hostname = a.hostname;
    this.port = a.port;
    this.pathname = a.pathname;
    this.search = a.search;
    this.hash = a.hash;
    
    // 模拟searchParams的get方法
    this.searchParams = {
      get: (key) => {
        const paramObj = parseUrlParams(this.href);
        return paramObj[key] || null;
      }
    };
  };
}

添加后你原本的代码var newUrl = new URL("http://www.testsite.com?name=abc&class=123");就能在IE11里正常运行了。

方法三：利用DOM元素解析URL #

如果你不想额外写函数，也可以直接用IE11支持的<a>标签来解析URL的各个组成部分：

const a = document.createElement('a');
a.href = "http://www.testsite.com?name=abc&class=123";

console.log(a.protocol); // 输出 "http:"
console.log(a.host); // 输出 "www.testsite.com"
console.log(a.search); // 输出 "?name=abc&class=123"

配合上面的parseUrlParams函数，就能轻松提取具体的参数值。

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