2016-02-05 26 views
31

Ich verwende dieses jquery Popup-Plugin from this link auf meiner WordPress-Website. Es funktioniert gut in allen Browsern, aber geben Sie den folgenden Fehler auf IE11.Error error: Objekt unterstützt keine Eigenschaft oder Methode 'assign'

enter image description here

Jede Hilfe ist sehr geschätzt.

+2

@JohnDoe, können Sie ein funktionierendes Beispiel nennen? – Dekel

+2

@pragya, bitte geben Sie Ihren Code ein, damit wir beurteilen können, was das Problem ist ... mein Problem ist, dass das DOM-Element nicht gefunden wurde oder dieselbe ID mehrfach auf der Seite hat. –

Antwort

60

Wie andere erwähnt haben, die Object.assign() Verfahren nicht in IE unterstützt wird, aber es gibt eine polyfill verfügbar, sind es nur "vor" Plugin-Deklaration:

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

Von 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 den Polyfill, um den gleichen Fehler zu erhalten, den Sie auf Ihrer Seite bekommen).

+2

Warum verwendet es einfach '! =' Anstelle von sicherer '! =='? –

4

@ Andres-Ilich die richtige Antwort auf Ihre Frage ist aber die falsche Frage fragst:

Warum Verwenden Sie nicht nur ein jQuery-Plugin, das IE wie Zurbs hervorragende Unterstützung unterstützt. Reveal: https://github.com/zurb/reveal

Es wird alles tun ng du willst und nicht diesen Fehler werfen.

5

@John Doe

dachte ich aus Ihrem Kommentar, dass Sie dies in Knoten/reagieren Stack implementieren möchten. Dies ist sehr verschieden von der ursprünglichen Frage und Sie sollten Ihre eigenen gefragt haben;)
Wie auch immer, Heres was Sie tun müssen ...

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

Zuerst in package.json in Ihrem Stammordner, fügen Sie es6-object-assign als Abhängigkeit:

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

Dann, wenn Sie es in Knotenumgebung Verwendung verwenden möchten:

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

Wenn Sie mit der Ausgabe auf der Vorderseite (Browser) Ende ...
Fügen Sie es in Ihrer index.html Datei hinzu ...

<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 vorformulierten Sie verwenden, meist nur node_modules, aber manchmal, wenn index.html Sie in einem Unterverzeichnis benötigen, ist zu verwenden, um, ../node_modules

3

Derzeit auf einem jQuery arbeiten mich: Pop-up https://github.com/seahorsepip/jPopup

Hat alles Sie würden von einem Popup und mehr erwarten: D

Wie auch immer, ich schreibe gerade Version 2, die eine große Neuschreibung ist und Unterstützung für IE6 (Version 1 war IE7 +) und lief in einen ähnlichen Fehler. ..

Originalcode, der den Fehler in IE6 gab:

//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 mit kommen musste bis: Grundsätzlich

//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(); 
1

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

Es ist Praxis, eine Polyfill-Funktion zu machen, die sich in der gleichen Weise verhält wie Object.assign(target, ...) von ES6.

Ich denke, die beste Lösung jedes Argument nach target iterieren ist, jede Eigenschaft arguments Objekte target zuweisen, eine Iteration zwischen Objekten und Arrays unter Berücksichtigung, Erstellen von Referenzen zu vermeiden. Optional, um Instanzen nicht zu verlieren, können Sie feststellen, ob die letzte Instanz der Eigenschaft nur "Array" oder "Object" entspricht, und Sie werden keine Image Schnittstelle verloren (zB), wenn Sie neue Referenzen, aber Objekte mit erstellen möchten Diese Instanzen sind immer noch Referenz.

Bearbeiten: das Original Object.assign funktioniert nicht auf diese Weise.

Nach dieser Lösung habe ich meine eigene Polyfill, die here gefunden werden kann.

2

Da Sie die Frage mit jQuery markiert haben, können Sie die Funktion jQuery extend verwenden. Keine Notwendigkeit für ein Polyfill und es fügt sich auch tief zusammen.

Beispiel:

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} 
Verwandte Themen