IE11的反应解决方案

Question

我在我的WordPress网站上使用这个jquery popup插件from this link。它在所有浏览器上都能正常工作，但在IE11上出现以下错误。

Answer 1

正如其他人所提到的，IE中不支持Object.assign()方法，但有一个polyfill可用，只需在插件声明“之前”包含它：

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（只需删除polyfill即可获得您在网页上遇到的相同错误。）

Answer 2

@John Doe

我从你的评论中想到你想在node / react堆栈中实现它。这与原始问题非常不同，你应该问自己;）无论如何，你需要做什么......

您可以使用[es6-object-assign] [1]。它是ES6 Object.assign（）“polyfill”。

首先，在根文件夹的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

Answer 3

此问题的可能解决方案：

在custombox.min.js
之前添加脚本legacy.min.js

来源：custombox github project

Answer 4

@ Andres-Ilich对你的问题有正确的答案，但你提出了错误的问题：

为什么不使用支持IE的jQuery插件，如Zurb的优秀Reveal：https://github.com/zurb/reveal

它会做你想做的一切，而不是抛出这个错误。

Answer 5

目前正在处理jQuery弹出窗口： https://github.com/seahorsepip/jPopup

您拥有弹出窗口等所有内容：D

无论如何回到主题，我目前正在编写第2版，这是一个很大的改写，并增加了对IE6的支持（版本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();

Answer 6

由于您使用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}

Answer 7

当某些html元素id与JavaScript函数中的某个变量具有相同的id时，通常会发生这些错误。更改其中一个代码的名称后工作。

来源：SCRIPT438: Object doesn't support property or method IE

其他链接：jquery validation IE Object doesn't support property

Answer 8

基本上，所有浏览器都不支持Object.assign，但是，Object可以在当前浏览器不支持的情况下重新分配它。

制作polyfill函数是一种实践，其行为方式与ES6的Object.assign(target, ...)相同。

我认为最好的解决方案是在target之后迭代每个参数，将arguments个对象的每个属性分配给target，考虑对象和数组之间的迭代，以避免创建引用。可选地，为了不丢失实例，您可以检测属性的最后一个实例是否仅等于"Array"或"Object"，这样做不会丢失Image接口（例如）如果您计划创建新引用，但具有这些实例的对象仍将被引用。

修改：原始Object.assign无法以这种方式运作。

根据这个解决方案，我有自己的polyfill，可以找到here。

Answer 9

IE11的反应解决方案

关于shramee's answer，它表示如下：

your comment中的
@JohnDoe ，您想在 node / react 堆栈中实现。这与原始问题有很大不同，但是您可以使用es6-object-assign，这是ES6 Object.assign()“ polyfill”：

此polyfill已更新，现在可以做一些不同的事情了：

在根文件夹package.json中，添加es6-object-assign作为依赖项（之后在命令行中执行npm i）
```
"dependencies": {
    "es6-object-assign": "^1.0.2",
    "react": "^16.8.6",
    ...
  },
```
或只需运行：npm i --save es6-object-assign

要在节点环境中使用它：

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

要在 index.html 中使用它，只需为其添加自动polyfill JS文件引用（如果{{1}中有脚本}调用<body>，您可以将其添加到Object.assign()元素的末尾）。
1. 直接从<head>调用：
```
node_modules
```
  <script src="location_of_node_modules/es6-object-assign/dist/object-assign-auto.min.js"></script>取决于您的项目结构（当 index.html 在子目录中时，您可能需要：location_of_node_modules）。
2. 但是，这可能对您不起作用（由于../node_modules个文件夹的访问，例如您正在使用create-react-app）。如果是这样，只需将JS文件从node_modules node_modules文件夹复制到public/ folder，然后：
```
dist/
```
  您可能要使用未缩小的文件并添加其他自定义的polyfill（例如<script src="%PUBLIC_URL%/object-assign-auto.js"></script>）。

Answer 10

请添加脚本

<script src="https://cdn.jsdelivr.net/npm/es6-object-assign@1.1.0/dist/object-assign-auto.min.js"></script>

到html文件以解决此问题。

获取错误：对象不支持属性或方法＆＃39;分配＆＃39;

10 个答案:

IE11的反应解决方案