2016-02-05 327 views
31

我在我的WordPress网站上使用这个jquery弹出式插件from this link。它在所有浏览器上工作正常,但在IE11上出现以下错误。获取错误:对象不支持属性或方法'assign'

enter image description here

任何帮助深表感谢。

+2

@JohnDoe,你能提供一个工作的例子吗? – Dekel

+2

@pragya,请把你的一些代码,所以我们可以判断是什么问题...我是它是与dom元素没有找到问题或具有相同的ID多次在页面上。 –

回答

60

正如其他人所提到的,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(只需删除polyfill即可获得与您的页面相同的错误)。

+2

为什么它使用单个'!='而不是更安全的'!=='? –

4

@安德烈 - 伊里奇有正确的回答你的问题,但你问错了问题:

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

它会做everythi你想要的,而不是抛出这个错误。

5

@约翰母鹿

我从要实现这点/反应堆您的评论想通了。这与原来的问题有很大不同,你应该问自己;)
反正,你需要做什么...

你可以使用[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

3

目前正在对一个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(); 
1

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

这是做一个polyfill函数,其行为方式与ESE的Object.assign(target, ...)相同。

我认为最好的办法是target后遍历每个参数,arguments对象的每个属性分配给target,考虑对象和数组之间的迭代,以避免造成引用。可选地,为了不丢失实例,您可以检测属性的最后一个实例是否仅等于"Array""Object",并且如果您计划创建新引用但不会丢失Image接口(例如)这些实例仍然是参考。

编辑:原始Object.assign不以这种方式工作。

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

2

既然你用jQuery标记了问题,你可以使用jQuery extend函数。不需要polyfill,它也可以进行深度合并。

例如:

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} 
相关问题