web-dev-qa-db-ja.com

エラーの取得:オブジェクトはプロパティまたはメソッド「assign」をサポートしていません

私はこのjqueryポップアッププラグインを使用しています このリンクから WordPressサイトで。すべてのブラウザで正常に機能していますが、IE11では次のエラーが発生します。

enter image description here

47
pragya rai

他の人が言及したように、 Object.assign() メソッドはIEでサポートされていませんが、利用可能なポリフィルがあり、プラグイン宣言の「前」にそれを含めるだけです:

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

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

テストページ: http://jsbin.com/pimixel/edit?html,js,output (ポリフィルを削除するだけで、ページで発生しているのと同じエラーが発生します)。

100
Andres Ilich

ドキュメントによると、Object.assign()は新しいテクノロジーであり、ECMAScript 2015(ES6)標準の一部です。

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

また、IEではサポートされていません。

7

@ジョン・ドウ

あなたのコメントから、これをノード/反応スタックに実装したいことがわかりました。これは元の質問とは大きく異なり、自分で質問する必要があります;)
とにかく、あなたがする必要があることは...

[es6-object-assign] [1]を使用できます。 ES6 Object.assign()「ポリフィル」です。

まず、ルートフォルダーのpackage.jsonで、依存関係としてes6-object-assignを追加します。

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

次に、ノード環境で使用する場合:

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

フロント(ブラウザ)側で問題が発生している場合...
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は使用する定型文に依存しますが、ほとんどはnode_modulesですが、index.htmlが使用する必要があるサブディレクトリにある場合は、../node_modules

7
shramee

この問題の可能な解決策:

Custombox.min.jsの前にスクリプトlegacy.min.jsを追加します

ソース: custombox githubプロジェクト

6
aprovent

@ Andres-Ilichはあなたの質問に正しい答えを持っていますが、あなたは間違った質問をしています:

Zurbの優れたRevealのようなIEをサポートするjQueryプラグインを使用しないのはなぜですか。 https://github.com/zurb/reveal

必要なことはすべて実行され、このエラーはスローされません。

4
staypuftman

現在、自分でjQueryポップアップを操作しています: https://github.com/seahorsepip/jPopup

ポップアップに期待するすべてのものがあります:D

とにかくトピックに戻って、私は現在、大きな書き換えであり、IE6のサポートを追加するバージョン2を書いています(バージョン1はIE7 +でした)、同様のエラーに遭遇しました...

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

私が思いついたハック:

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

JQueryで質問にタグを付けたので、jQuery extend 関数を使用できます。ポリフィルは不要であり、ディープマージも実行します。

例えば:

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

結果:

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

これらのエラーは、通常、一部のhtml要素IDがJavaScript関数の変数と同じIDを持つ場合に発生します。それらのいずれかの名前を変更した後、コードが機能しました。

ソース: SCRIPT438:オブジェクトはプロパティまたはメソッドIEをサポートしていません

その他のリンク: jquery validation IEオブジェクトはプロパティをサポートしていません

2
Milap

基本的に、Object.assignはすべてのブラウザでサポートされているわけではありませんが、現在のブラウザでサポートされていない場合は、Objectで再割り当てすることができます。

ES6のObject.assign(target, ...)と同じように動作するポリフィル関数を作成するのは実用的です。

最善の解決策は、targetの後の各引数を反復し、argumentsオブジェクトの各プロパティをtargetに割り当て、オブジェクトと配列間の反復を考慮して、参照の作成を避けることだと思います。オプションで、インスタンスを失わないために、プロパティの最後のインスタンスが"Array"または"Object"のみに等しいかどうかを検出できます。そうすることで、Imageインターフェイスが失われません(例: )新しい参照の作成を計画しているが、これらのインスタンスを持つオブジェクトは引き続き参照されます。

Edit:元のObject.assignはこの方法では機能しません。

この解決策によると、私は独自のポリフィルを持っています ここ を見つけることができます。

1
Hydroper

IE11のReactソリューション

shramee's answer については、次のように述べています。

@ JohnDoefrom your comment 、これをnode/reactスタックに実装したい。これは元の質問とは非常に異なりますが、ES6 Object.assign() "polyfill"である es6-object-assign を使用できます。

このポリフィルが更新され、物事を少し異なる方法で実行できるようになりました。

  • ルートフォルダーのpackage.jsonで、依存関係としてes6-object-assignを追加します(コマンドラインでnpm iを実行します):

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

    Or単に実行:npm i --save es6-object-assign

  • ノード環境で使用するには:

    require('es6-object-assign').polyfill();
    // Same version with automatic polyfilling
    require('es6-object-assign/auto');
    
  • index.htmlで使用するには、自動ポリフィルJSファイルへの参照を追加するだけです(<body>にスクリプトがある場合) Object.assign()を呼び出す場合は、<head>要素の最後に追加できます)。

    1. node_modulesから直接呼び出す:

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

      location_of_node_modulesはプロジェクト構造に依存します(index.htmlが必要なサブディレクトリにある場合:../node_modules)。

    2. ただし、これはうまくいかなかったかもしれません(node_modulesフォルダーへのアクセスのため、たとえば create-react-app を使用しています)。その場合は、JSファイルをdist/ node_modulesフォルダーから public/フォルダー にコピーしてから:

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

      縮小されていないファイルを使用し、他のカスタマイズされたポリフィルを追加することもできます(例:startsWith)。

0
CPHPython

スクリプトを追加してください

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

この問題を解決するためにhtmlファイルに。

0
HoangDo