SCRIPT5009: „URLSearchParams“ ist in IE 11 nicht definiert

Ich versuche, die auszuführen URLSearchParams aber ich erhalte eine Fehlermeldung auf IE 11, da es dort nicht unterstützt wird. Es funktioniert perfekt in Chrome und Firefox.

Wie kann ich die entsprechende Funktionalität in IE 11 erhalten? Ich führe den Code in Laravel 5.4 aus.

Hier ist die Codezeile, die ich auszuführen versuche.

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

Fehler:

SCRIPT5009: „URLSearchParams“ ist nicht definiert

Ich habe eine Lösung erhalten, indem ich den Code durch Folgendes ersetzt habe:

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

Also zum Beispiel “example.com?param1=name&param2=&id=6”

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

Odhikaris Antwort als (teilweise) 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)

Falls das jemand in 2019 findet, Corejs unterstützt jetzt auch URLSearchParams als Polyfill, man kann also einfach bei Corejs bleiben und muss nicht selbst etwas zusammenbrauen.

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

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

Ich konnte dies mit lösen URL-Suchparameter-Polyfill. Importieren Sie einfach in die Datei, in der Sie URLSearchParams verwenden:

import 'url-search-params-polyfill';

Und Ihre bestehenden Verweise auf URLSearchParams sollten jetzt funktionieren!

Ich hatte ein ähnliches Problem beim Versuch, es zu verwenden URLSearchParams beim Versuch, eine zu machen AXIOS Posten Sie, wenn Sie Internet Explorer verwenden. Es weicht also ein wenig von Ihrer Beschreibung ab, aber ich möchte meine Lösung hier posten, nur für den Fall.

Hier ist meins AXIOS Postcode von meiner React-App, die für Edge, Chrome und Firefox gut funktioniert, aber im IE gibt es mir den Fehler

SCRIPT5009: URLSearchParams ist nicht definiert

:

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

            })     

Um es mit dem IE zum Laufen zu bringen, habe ich verwendet jQuery um die Post zu machen und benutzte a Var Objekt statt URLSearchParams. Die folgende if-Anweisung prüft, ob sich der Benutzer im IE befindet:

    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
    }

Um die jQuery zu bekommen, musste ich tun

npm installiert jquery

Dann habe ich zusätzlich zu meiner React-Datei Folgendes importiert:

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

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;