SCRIPT5009: 'URLSearchParams' 在IE 11中未定义

Question

我正在尝试执行URLSearchParams，但因为IE 11不支持它而出现错误。 它在Chrome和Firefox中工作得很好。

如何在IE 11中获得相同的功能？ 我正在Laravel 5.4中执行代码。

这是我正在尝试执行的代码行：

var urlParams = new URLSearchParams(window.location.search);

错误：

SCRIPT5009：'URLSearchParams'未定义

- Narayan Adhikari

Answer 1

通过用以下代码替换原有代码解决了问题：

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results == null){
       return null;
    }
    else {
       return decodeURI(results[1]) || 0;
    }
}

例如，"example.com?param1=name&param2=&id=6"。

$.urlParam('param1');  // name
$.urlParam('id');      // 6
$.urlParam('param2');  // null

- Narayan Adhikari

---

嗨，你好。 我不太理解你是如何将值“name”分配给参数“param1”的，其他参数也一样。 你能否解释一下吗？ 在我的情况下，我有： `var parameters = new URLSearchParams();和一个设置属性值的函数： function setProfile(value){ parameters.append("ProfileId", value); }` - Daniele

我真的不明白人们如何在正则表达式中找到解决方案。非常感谢！节省了我的时间。 - Naseem Ahamed

Answer 2

Odhikari的回答作为（部分）polyfill：

(function (w) {

    w.URLSearchParams = w.URLSearchParams || function (searchString) {
        var self = this;
        self.searchString = searchString;
        self.get = function (name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
            if (results == null) {
                return null;
            }
            else {
                return decodeURI(results[1]) || 0;
            }
        };
    }

})(window)

- Andy Taw

---

很好，因为它不会创建新的函数，而是实现了缺失的函数，所以每个人都可以使用复制粘贴。 - Adam Bubela

使用decodeURIComponent而不是decodeURI是一个更完整的解决方案，我认为。 - Štěpán

我喜欢这种方法，但是如果你需要使用append（即URLSearchParams.append()），它就不起作用了。 - Brent O'Connor

因此，“partial”。 - Andy Taw

你可以通过在self.get定义下添加以下内容来为@AndyTaw的回答添加对“has()”方法的支持： self.has = function(name) { var results = new RegExp('[\?&]' + name).exec(self.searchString); if (results == null) { return null; } else { return true; }}，你也可以以类似的方式根据需要添加其他方法（如append()）的支持。 - Rick Gladwin

Answer 3

如果有人在2019年看到这篇文章，现在corejs也支持URLSearchParams作为polyfill，所以你可以继续使用corejs而不需要自己编写一些东西。

import 'core-js/features/url-search-params';

https://github.com/zloirock/core-js#url-and-urlsearchparams

：

- akuji1993

---

适用于Angular。谢谢。 - Felix

适用于JQuery。拜拜！ - Design by Adrian

这需要哪个版本的core-js？ - ChargerIIC

Answer 4

我使用url-search-params-polyfill解决了这个问题。只需将其导入您正在使用URLSearchParams的文件中：

import 'url-search-params-polyfill';

现有的 URLSearchParams 的引用现在应该可以工作了！

- Laura Mann

---

另一种导入方式：<script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js"></script> - thargenediad

Answer 5

我曾经在使用Internet Explorer时，尝试使用URLSearchParams进行AXIOS Post时遇到了类似的问题。虽然与你描述的有些不同，但我想在这里发布我的解决方案以供参考。

以下是我的React应用程序中的AXIOS Post代码，适用于Edge、Chrome和Firefox，但在IE上会出现错误：

SCRIPT5009: URLSearchParams未定义

        let axiosConfig = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };            
        // Putting together the data to be passed to local servlet.
        const params = new URLSearchParams();
        params.append('var1', this.state.data1);
        params.append('var2', this.state.data2);

        var urlToPost = 'https://localhost:8080/someLocalServlet/doSomething';

        var self = this;  
        axios.post(urlToPost, params, axiosConfig)
            .then((res) => {
                // Handling Response from Servlet.
                console.log("AXIOS POST RESPONSE RECEIVED: ", res);

            })
            .catch((err) => {
                // Handler exception error thrown by Servlet.
                console.log("AXIOS POST ERROR: ", err);

            })     

为了使其与IE兼容，我使用了jQuery进行Post，并使用了var对象而不是URLSearchParams。下面的if语句检查用户是否在IE上：
如果要使其在IE上运行，可以使用jQuery进行Post，并使用var对象代替URLSearchParams。下面的if语句检查用户是否在IE上：

    if((navigator.userAgent.indexOf("MSIE") !== -1 ) || (!!document.documentMode === true )) { //IF IE > 10
        var myObject = {
            var1: this.state.data1,
            var2: this.state.data2
        };
        var urlToPostTo = 'https://localhost:8080/someLocalServlet/doSomething';

        $.post(urlToPost, myObject, 
            function(result) {  
                alert( "success" );
            })
              .done(function(result) {
                alert( "second success" );
              })
              .fail(function(result) {
                alert( "error" );
              })
              .always(function(result) {
                    alert( "finished" );
              });        
    } else {
       // use the AXIOS POST code above
    }

为了获取jQuery，我需要执行以下操作：

npm install jquery

然后，在我的React文件顶部导入以下内容：

import $ from 'jquery'; 
import { polyfill } from 'es6-promise'; polyfill();

- CAMD_3441

Answer 6

class UrlSearchParams {
  constructor(query) {
    this.query = query;
  }
  getSearchObject = () => {
    const { query } = this;
    return query
    ? (/^[?#]/.test(query) ? query.slice(1) : query)
      .split("&")
      .reduce((params, param) => {
        let [key, value] = param.split("=");
        params[key] = value
          ? decodeURIComponent(value.replace(/\+/g, " "))
          : "";
        return params;
      }, {})
  : {};
  };
  getAll = () => {
    const searchParams = this.getSearchObject();
    return searchParams;
  }
  get = param => {
    const searchParams = this.getSearchObject();
    return searchParams[param];
  };
  setUrl = (param, value) => {
    const searchParams = this.getSearchObject();
    searchParams[param] = value;
    return Object.keys(searchParams)
    .map(key => key + "=" + searchParams[key])
    .join("&");
  };
}

export default UrlSearchParams;

- Bulut Ağırman

---

这在IE上无法工作，但问题明确要求。没有任何版本的IE支持Class或Arrow函数，更不用说“export default”了。除了setURL缺少encodeURIComponent之外，代码还是很好的。 - Jk041