SCRIPT5009: ‘URLSearchParams’ is niet gedefinieerd in IE 11

Ik probeer de URLSearchParamsuit te voeren, maar ik krijg een foutmelding op IE 11 omdat het daar niet wordt ondersteund. Het werkt perfect in Chrome en Firefox.

Hoe krijg ik de equivalente functionaliteit in IE 11?
Ik voer de code uit in Laravel 5.4.

Hier is de coderegel die ik probeer uit te voeren.

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

Fout:

SCRIPT5009: ‘URLSearchParams’ is niet gedefinieerd

Antwoord 1, autoriteit 100%

Ik heb een oplossing gevonden door de code te vervangen door het volgende:

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

Dus bijvoorbeeld “example.com?param1=name&param2=&id=6”

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

Antwoord 2, autoriteit 45%

Odhikari’s antwoord als een (gedeeltelijke) 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)

Antwoord 3, autoriteit 23%

Als iemand dit in 2019 vindt, corejs ondersteunt nu ook URLSearchParams als polyfill, zodat je gewoon bij corejs kunt blijven en niet zelf iets hoeft te brouwen.

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

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

Antwoord 4, autoriteit 11%

Ik heb dit kunnen oplossen door url-search-params-polyfill. Importeer gewoon in het bestand waarin u URLSearchParams gebruikt:

import 'url-search-params-polyfill';

En uw bestaande verwijzingen naar URLSearchParams zouden nu moeten werken!

Antwoord 5, autoriteit 2%

Ik heb een soortgelijk probleem gehad bij het gebruik van URLSearchParamsbij het maken van een AXIOSPost bij het gebruik van Internet Explorer. Het wijkt dus een beetje af van uw beschrijving, maar ik wil mijn oplossing hier graag plaatsen voor het geval dat.

Hier is mijn AXIOS-postcode van mijn React-app die prima werkt voor Edge, Chrome en Firefox, maar in IE geeft het me de fout

SCRIPT5009: URLSearchParams is niet gedefinieerd

:

       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);
            })     

Om het met IE te laten werken, gebruikte ik jQueryom de Post te doen en gebruikte ik een varobject in plaats van URLSearchParams.
Het onderstaande if-statement controleert of de gebruiker IE gebruikt:

   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
    }

Om de jQuery te krijgen, moest ik wel

npm jQuery installeren

Vervolgens heb ik bovenop mijn React-bestand het volgende geïmporteerd:

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

Antwoord 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;