it-swarm.com.de

Fehler bekommen: Objekt unterstützt keine Eigenschaft oder Methode 'assign'

Ich benutze dieses JQuery Popup-Plugin von diesem Link auf meiner WordPress Site. Es funktioniert in allen Browsern, gibt aber den folgenden Fehler in IE11 aus.

enter image description here

47
pragya rai

Wie bereits erwähnt, wird die Object.assign () -Methode im IE nicht unterstützt, es steht jedoch eine Polyfill zur Verfügung. Fügen Sie sie einfach "vor" Ihrer Plugin-Deklaration ein:

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Testseite: http://jsbin.com/pimixel/edit?html,js,output (entfernen Sie einfach die Polyfill, um den gleichen Fehler zu erhalten, den Sie auf Ihrer Seite erhalten).

100
Andres Ilich

Gemäß der Dokumentation ist Object.assign () eine neue Technologie, die Teil des ECMAScript 2015 (ES6) -Standards ist:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Und es wird vom IE nicht unterstützt.

7

@John Doe

Ich habe aus Ihrem Kommentar herausgefunden, dass Sie dies in Node/React Stack implementieren möchten. Das ist ganz anders als die ursprüngliche Frage und du hättest deine eigene stellen sollen;)
Sowieso Heres, was Sie tun müssen ...

Sie können [es6-object-assign] [1] verwenden. Es ist eine ES6 Object.assign () "Polyfill".

Fügen Sie zunächst in package.json In Ihrem Stammordner es6-object-assign Als Abhängigkeit hinzu:

"dependencies": {
    "es6-object-assign": "^1.0.2",
    "react": "^0.12.0",
    ...
  },

Wenn Sie es dann in einer Knotenumgebung verwenden möchten, verwenden Sie:

require('es6-object-assign').polyfill();

Wenn Sie das Problem am vorderen Ende (Browser) haben ...
Füge es in deine index.html-Datei ein ...

<script src="location_of_node_modules/es6-object-assign/dist/object-assign.min.js"></script>
<script>
  window.ObjectAssign.polyfill();
</script>

location_of_node_modules Hängt von dem von Ihnen verwendeten Boilerplate ab, meist nur node_modules, Aber manchmal, wenn sich index.html in einem zu verwendenden Unterverzeichnis befindet, ../node_modules

7
shramee

Eine mögliche Lösung für dieses Problem:

Fügen Sie das Skript legacy.min.js vor custombox.min.js hinzu

quelle: Custombox Github-Projekt

6
aprovent

@ Andres-Ilich hat die richtige Antwort auf Ihre Frage, aber Sie stellen die falsche Frage:

Warum nicht einfach ein jQuery-Plugin verwenden, das IE wie Zurbs exzellentes Reveal unterstützt: https://github.com/zurb/reveal

Es wird alles tun, was Sie wollen und diesen Fehler nicht auslösen.

4
staypuftman

Derzeit arbeite ich selbst an einem jQuery-Popup: https://github.com/seahorsepip/jPopup

Hat alles, was Sie von einem Popup und mehr erwarten: D

Wie dem auch sei, ich schreibe gerade Version 2, die eine große Umschreibung ist und Unterstützung für IE6 hinzufügt (Version 1 war IE7 +) und auf einen ähnlichen Fehler gestoßen ist ...

Ursprünglicher Code, der den Fehler in IE6 verursacht hat:

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");

Der Hack, den ich mir einfallen lassen musste:

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div>");
this._vars.fakeScrollbar.html("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");
this._vars.fakeScrollbar = this._vars.fakeScrollbar.children();
3
seahorsepip

Da Sie die Frage mit jQuery markiert haben, können Sie die Funktion jQuery extend verwenden. Eine Polyfüllung ist nicht erforderlich, und sie geht auch tief ineinander über.

Beispielsweise:

var object1 = {
  Apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

Ergebnis:

{"Apple":0,"banana":{"price":200},"cherry":97,"durian":100}
3
Kalimah Apps

Dieser Fehler tritt normalerweise auf, wenn eine HTML-Element-ID dieselbe ID wie eine Variable in der JavaScript-Funktion hat. Nach dem Ändern des Namens eines davon funktionierte der Code.

Quelle: SCRIPT438: Objekt unterstützt keine Eigenschaft oder Methode IE

Andere Links: jquery validation IE Objekt unterstützt keine Eigenschaft

2
Milap

Grundsätzlich wird Object.assign Nicht von allen Browsern unterstützt, es ist jedoch möglich, es bei Object neu zuzuweisen, falls es vom aktuellen Browser nicht unterstützt wird.

Es ist ratsam, eine Polyfill-Funktion zu erstellen, die sich genauso verhält wie Object.assign(target, ...) von ES6.

Ich denke, die beste Lösung ist, jedes Argument nach target zu iterieren, jede Eigenschaft von arguments Objekten target zuzuweisen, unter Berücksichtigung einer Iteration zwischen Objekten und Arrays, um das Erstellen von Referenzen zu vermeiden. Um Instanzen nicht zu verlieren, können Sie optional feststellen, ob die letzte Instanz der Eigenschaft nur "Array" Oder "Object" Entspricht. Auf diese Weise gehen keine Image verloren. Schnittstelle (z. B.), wenn Sie vorhaben, neue Referenzen zu erstellen, Objekte mit diesen Instanzen jedoch weiterhin Referenzen sind.

Bearbeiten : Das Original Object.assign Funktioniert nicht auf diese Weise.

Nach dieser Lösung habe ich meine eigene Polyfüllung, die gefunden werden kann hier .

1
Hydroper

Reaktionslösung für IE11

In Bezug auf Shramees Antwort , was ungefähr so ​​aussah:

@ JohnDoe von Ihr Kommentar , Sie möchten dies in Knoten/Reagieren Stapel implementieren . Dies unterscheidet sich stark von der ursprünglichen Frage, aber Sie könnten es6-object-assign , eine ES6 Object.assign() "polyfill" verwenden:

Diese Polyfill wurde aktualisiert und die Dinge können jetzt ein bisschen anders gemacht werden:

  • fügen Sie in package.json in Ihrem Stammordner es6-object-assign als Abhängigkeit hinzu (führen Sie npm i anschließend in einer Befehlszeile aus):

    "dependencies": {
        "es6-object-assign": "^1.0.2",
        "react": "^16.8.6",
        ...
      },
    

    Oder einfach ausführen: npm i --save es6-object-assign

  • So verwenden Sie es in einer Knotenumgebung:

    require('es6-object-assign').polyfill();
    // Same version with automatic polyfilling
    require('es6-object-assign/auto');
    
  • Um es in Ihrer index.html zu verwenden, fügen Sie einfach die automatische Polyfill-JS-Datei hinzu (falls vorhanden) Skripte in <body>, die Object.assign() aufrufen, können am Ende des Elements <head> hinzugefügt werden.

    1. Direkter Aufruf von node_modules:

      <script src="location_of_node_modules/es6-object-assign/dist/object-assign-auto.min.js"></script>
      

      location_of_node_modules Hängt von Ihrer Projektstruktur ab (wenn sich index.html in einem Unterverzeichnis befindet, das Sie möglicherweise benötigen: ../node_modules).

    2. Dies hat jedoch möglicherweise nicht bei Ihnen funktioniert (aufgrund des Zugriffs auf die Ordner node_modules, Z. B. wenn Sie create-react-app verwenden). Wenn ja, kopieren Sie einfach die JS-Datei aus dem Ordner dist/ Node_modules in den Ordner public/ und dann:

      <script src="%PUBLIC_URL%/object-assign-auto.js"></script>
      

      Möglicherweise möchten Sie die nicht minimierte Datei verwenden und andere benutzerdefinierte Polyfills hinzufügen (z. B. startsWith).

0
CPHPython

bitte Skript hinzufügen

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/object-assign-auto.min.js"></script>

hTML-Datei, um dieses Problem zu beheben.

0
HoangDo