私はこのjqueryポップアッププラグインを使用しています このリンクから WordPressサイトで。すべてのブラウザで正常に機能していますが、IE11では次のエラーが発生します。
他の人が言及したように、 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 (ポリフィルを削除するだけで、ページで発生しているのと同じエラーが発生します)。
ドキュメントによると、Object.assign()は新しいテクノロジーであり、ECMAScript 2015(ES6)標準の一部です。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
また、IEではサポートされていません。
@ジョン・ドウ
あなたのコメントから、これをノード/反応スタックに実装したいことがわかりました。これは元の質問とは大きく異なり、自分で質問する必要があります;)
とにかく、あなたがする必要があることは...
[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
@ Andres-Ilichはあなたの質問に正しい答えを持っていますが、あなたは間違った質問をしています:
Zurbの優れたRevealのようなIEをサポートするjQueryプラグインを使用しないのはなぜですか。 https://github.com/zurb/reveal
必要なことはすべて実行され、このエラーはスローされません。
現在、自分で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();
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}
これらのエラーは、通常、一部のhtml要素IDがJavaScript関数の変数と同じIDを持つ場合に発生します。それらのいずれかの名前を変更した後、コードが機能しました。
基本的に、Object.assign
はすべてのブラウザでサポートされているわけではありませんが、現在のブラウザでサポートされていない場合は、Object
で再割り当てすることができます。
ES6のObject.assign(target, ...)
と同じように動作するポリフィル関数を作成するのは実用的です。
最善の解決策は、target
の後の各引数を反復し、arguments
オブジェクトの各プロパティをtarget
に割り当て、オブジェクトと配列間の反復を考慮して、参照の作成を避けることだと思います。オプションで、インスタンスを失わないために、プロパティの最後のインスタンスが"Array"
または"Object"
のみに等しいかどうかを検出できます。そうすることで、Image
インターフェイスが失われません(例: )新しい参照の作成を計画しているが、これらのインスタンスを持つオブジェクトは引き続き参照されます。
Edit:元のObject.assign
はこの方法では機能しません。
この解決策によると、私は独自のポリフィルを持っています ここ を見つけることができます。
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>
要素の最後に追加できます)。
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
)。
ただし、これはうまくいかなかったかもしれません(node_modules
フォルダーへのアクセスのため、たとえば create-react-app を使用しています)。その場合は、JSファイルをdist/
node_modulesフォルダーから public/
フォルダー にコピーしてから:
<script src="%PUBLIC_URL%/object-assign-auto.js"></script>
縮小されていないファイルを使用し、他のカスタマイズされたポリフィルを追加することもできます(例:startsWith
)。
スクリプトを追加してください
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/object-assign-auto.min.js"></script>
この問題を解決するためにhtmlファイルに。