web-dev-qa-db-fra.com

Erreur: L'objet ne prend pas en charge la propriété ou la méthode 'assign'

J'utilise ce plugin jquery popup à partir de ce lien sur mon WordPress site. Il fonctionne correctement sur tous les navigateurs, mais donne l'erreur suivante sur IE11.

enter image description here

jquerywordpresspopupmodal-dialog
47
pragya rai

Comme d'autres l'ont mentionné, la méthode Object.assign () n'est pas prise en charge dans IE, mais il existe un polyfill disponible, il suffit de l'inclure "avant" votre déclaration de plug-in:

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

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

Page de test: http://jsbin.com/pimixel/edit?html,js,output (il suffit de supprimer le polyfill pour obtenir la même erreur que vous obtenez sur votre page).

100
Andres Ilich

Selon la documentation, Object.assign () est une nouvelle technologie qui fait partie de la norme ECMAScript 2015 (ES6):

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

Et ce n'est pas supporté par IE.

7
Vimalan Jaya Ganesh

@ John Doe

D'après votre commentaire, j'ai compris que vous souhaitiez implémenter ceci dans la pile de nœuds/réactions. Ceci est très différent de la question initiale et vous auriez dû poser la vôtre;)
Quoi qu'il en soit, voici ce que vous devez faire ...

Vous pouvez utiliser [es6-object-assign] [1]. C'est un ES6 Object.assign () "polyfill".

Premièrement, dans package.json Dans votre dossier racine, ajoutez es6-object-assign Comme dépendance:

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

Ensuite, si vous souhaitez l’utiliser dans un environnement de noeud, utilisez:

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

Si vous rencontrez le problème sur front (navigateur) fin ...
Ajoutez-le dans votre fichier index.html ...

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

location_of_node_modules Dépend du modèle que vous utilisez, principalement node_modules, Mais parfois, lorsque index.html est dans un sous-répertoire, vous devez utiliser ../node_modules

7
shramee

Une solution possible à ce problème:

Ajoutez le script legacy.min.js avant le custombox.min.js

source: projet custombox github

6
aprovent

@ Andres-Ilich a la bonne réponse à votre question mais vous posez la mauvaise question:

Pourquoi ne pas simplement utiliser un plugin jQuery qui supporte IE comme l'excellent Reveal de Zurb: https://github.com/zurb/reveal

Il va faire tout ce que vous voulez et ne pas jeter cette erreur.

4
staypuftman

Je travaille actuellement sur un popup jQuery: https://github.com/seahorsepip/jPopup

A tout ce que vous attendez d'un popup et plus: D

Quoi qu'il en soit, je suis en train de rédiger la version 2, qui est une grosse réécriture et ajoute le support pour IE6 (la version 1 était IE7 +) et a rencontré une erreur similaire ...

Code original qui a donné l'erreur dans IE6:

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

Le bidouillage que je devais trouver:

//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

Puisque vous avez marqué la question avec jQuery, vous pouvez utiliser la fonction jQuery extend . Pas besoin de polyfill et ça fusionne aussi bien.

Par exemple:

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

Résultat:

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

Ces erreurs se produisent généralement lorsqu'un identifiant d'élément HTML a le même identifiant qu'une variable de la fonction JavaScript. Après avoir changé le nom de l'un d'eux, le code a fonctionné.

Source: SCRIPT438: L'objet ne prend pas en charge la propriété ou la méthode IE

Autre lien: validation jquery IE L'objet ne prend pas en charge la propriété

2
Milap

Fondamentalement, Object.assign N'est pas pris en charge par tous les navigateurs. Cependant, il est possible de le réaffecter à Object s'il n'est pas pris en charge par le navigateur actuel.

Il est pratique de créer une fonction polyfill, qui se comporte de la même manière que Object.assign(target, ...) de ES6.

Je pense que la meilleure solution consiste à itérer chaque argument après target et à affecter chaque propriété de arguments objets à target, en considérant une itération entre des objets et des tableaux, afin d'éviter de créer des références. Pour ne pas perdre d'instances, vous pouvez éventuellement détecter si la dernière instance de la propriété est uniquement égale à "Array" Ou "Object", Et vous ne perdrez ainsi pas un Image. interface (par exemple) si vous envisagez de créer de nouvelles références, mais que les objets avec ces instances seront toujours référencés.

Edit : l'original Object.assign Ne fonctionne pas de cette façon.

Selon cette solution, j'ai mon propre polyfill qui peut être trouvé ici .

1
Hydroper

React solution for IE11

Concernant réponse de shramee , qui dit quelque chose comme ceci:

@ JohnDoe de votre commentaire , vous voulez implémenter cela dans nœud/réagir . Ceci est très différent de la question initiale, mais vous pouvez utiliser es6-object-assign , un ES6 Object.assign() "polyfill":

Ce polyfill a été mis à jour et les choses peuvent être faites un peu différemment maintenant:

  • dans package.json dans votre dossier racine, ajoutez es6-object-assign comme dépendance (en exécutant npm i dans une ligne de commande après):

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

    ou exécutez simplement: npm i --save es6-object-assign

  • Pour l'utiliser dans un environnement de noeud:

    require('es6-object-assign').polyfill();
// Same version with automatic polyfilling
require('es6-object-assign/auto');

  • Pour l'utiliser dans votre index.html, ajoutez simplement le fichier JS polyfill automatique (si vous avez Les scripts de <body> qui invoquent Object.assign() peuvent être ajoutés à la fin de l'élément <head>).

    1. Invoquer directement à partir de node_modules:

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

      location_of_node_modules Dépend de la structure de votre projet (lorsque index.html se trouve dans un sous-répertoire dont vous pourriez avoir besoin: ../node_modules).

    2. Toutefois, cela n’a peut-être pas fonctionné pour vous (en raison de l’accès aux dossiers node_modules, Par exemple, vous utilisez create-react-app ). Si tel est le cas, copiez simplement le fichier JS du dossier dist/ Node_modules dans le dossier public/ , puis:

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

      Vous voudrez peut-être utiliser le fichier non minifié et ajouter d'autres polyfill personnalisés (par exemple, startsWith).

0
CPHPython

s'il vous plaît ajouter un script

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

au fichier HTML pour résoudre ce problème.

0
HoangDo