I am using this jquery popup plugin from this link on my WordPress site. It's working fine on all browsers but giving the following error on IE11.
Any help is much appreciated.
8 Answers
Answers 1
As others have mentioned, the Object.assign() method is not supported in IE, but there is a polyfill available, just include it "before" your plugin declaration:
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; }; } From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Test page: http://jsbin.com/pimixel/edit?html,js,output (just remove the polyfill to get the same error you're getting on your page).
Answers 2
A possible solution for this problem:
Add the script legacy.min.js before the custombox.min.js
source: custombox github project
Answers 3
These error usually occurs when some html element id has the same id as some variable in the JavaScript function. After changing the name of one of them code worked.
Source : SCRIPT438: Object doesn't support property or method IE
Other link : jquery validation IE Object doesn't support property
Answers 4
As per the documentation, Object.assign() is a new technology, part of the ECMAScript 2015 (ES6) standard
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign
And, it is not supported by IE.
Answers 5
@Andres-Ilich has the right answer to your question but you're asking the wrong question:
Why not just use a jQuery plugin that supports IE like Zurb's excellent Reveal: https://github.com/zurb/reveal
It will do everything you want and not throw this error.
Answers 6
@John Doe
I figured out from your comment that you want to implement this in node/react stack... This is very different from original question and you should have asked your own ;)
Anyways, Heres what you need to do...
You can use [es6-object-assign][1]. It is an ES6 Object.assign() "polyfill".
First, in package.json in you root folder, add es6-object-assign as a dependency:
"dependencies": { "es6-object-assign": "^1.0.2", "react": "^0.12.0", ... }, Then if you want to use it in node environment use:
require('es6-object-assign').polyfill(); If you are having the issue on front (browser) end...
Add it in your index.html file...
<script src="location_of_node_modules/es6-object-assign/dist/object-assign.min.js"></script> <script> window.ObjectAssign.polyfill(); </script> location_of_node_modules depends on boilerplate you use, mostly just mode_modules, but sometimes when index.html is in a subdirectory you need to use, ../mode_modules
Answers 7
Currently working on a jQuery popup myself: https://github.com/seahorsepip/jPopup
Has everything you'd expect of a popup and more :D
Anyway back on topic, I'm currently writing version 2 which is a big rewrite and adds support for IE6 (version 1 was IE7+) and ran into a similiar error...
Original code that gave the error in 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>"); The hack I had to come up with:
//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(); Answers 8
Basically, Object.assign isn't supported by all browsers, however, it's possible to re-assign it at Object case it's not supported by the current browser.
It's pratice to make a polyfill function, which behaves in the same way as Object.assign(target, ...) of ES6.
I think the best solution is to iterate each argument after target, assign each property of arguments objects to target, considering a iteration between objects and arrays, to avoid creating references. Optionally, to not lost instances, you can detect if the last instance of the property is only equal to "Array" or "Object", and doing so you won't lost a Image interface (e.g) if you plan to create new references, but objects with these instances will still be reference.
Edit: the original Object.assign doesn't work in this way.
According to this solution, I've my own polyfill which can be found here.
0 comments:
Post a Comment