"Object Doesn't Support This Property or Method" Ie10/11

Object doesn't support this property or method IE10/11

You're adding forEach to the window object, not to the object you return; you're calling $ as a function, not a constructor. Since you're using loose mode (apparently), this within the function call is a reference to the global object (also accessible as window on browsers). You're returning the collection from querySelectorAll unchanged.

The reason it works on Chrome is that the collection returned by querySelectorAll has its own forEach (this is a fairly recent addition).

For this to work, four options:

1. Return an object and add forEach to it, copying the elements from the QSA collection to that object. E.g.:

   function $(selector) {
       const result = Array.from(document.querySelectorAll(selector));
       result.forEach = Array.prototype.forEach;
       // Perhaps map, filter, etc.; add in a loop?
       return result;
   }
   

   Or in ES5:

   var $ = (function() {
       var methods = Array.prototype;
       function $(selector) {
           var result = methods.slice.call(document.querySelectorAll(selector));
           result.forEach = methods.forEach;
           // Perhaps map, filter, etc.; add in a loop?
           return result;
       }
       return $;
   })();
   

2. Add forEach to the NodeList prototype if it's not already there and use forEach directly on the collection from querySelectorAll. For instance:

   if (typeof NodeList !== "undefined" &&
       NodeList.prototype &&
       !NodeList.prototype.forEach) {
       // Yes, direct assignment is fine here, no need for `Object.defineProperty`
       NodeList.prototype.forEach = Array.prototype.forEach;
   }
   

   (No need for Object.defineProperty above, enumerable [surprisingly], configurable, and writable are all true for it on Chrome and Firefox, so we can just do direct assignment as above.)

   ...and then of course your $ becomes nothing more than

   function $(selector) {
       return document.querySelectorAll(selector);
   }
   

   (To start with. If you wanted to add more features, you'd probably want to go the way of #1.)

3. Return an array:

   function $(selector) {
       return Array.from(document.querySelectorAll(selector));
   }
   

   Or in ES5:

   function $(selector) {
       return Array.prototype.slice.call(document.querySelectorAll(selector));
   }
   

4. Subclass Array (which cannot be perfectly polyfilled on pre-ES2015 JavaScript engines) so you can add your own features on top of Array's features:

   class MyThingy extends Array {
       // Perhaps further methods here
   }
   function $(selector) {
       return MyThingy.from(document.querySelectorAll(selector));
   }
   

   No ES5 option here, you'd need to at least transpile and polyfill.

If you're going to add features beyond those provided by Array, I quite like #4 other than the polyfilling available only being "so" good. It may well be sufficient for your purposes.

Object doesn't support property or method 'map' - IE11

Try to add the following javascript script before using the map method (add the script in the head of the index.html page):

// Production steps of ECMA-262, Edition 5, 15.4.4.19
    // Reference: http://es5.github.io/#x15.4.4.19
    if (!Array.prototype.map) {

      Array.prototype.map = function(callback/*, thisArg*/) {

        var T, A, k;

        if (this == null) {
          throw new TypeError('this is null or not defined');
        }

        // 1. Let O be the result of calling ToObject passing the |this|
        //    value as the argument.
        var O = Object(this);

        // 2. Let lenValue be the result of calling the Get internal
        //    method of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = O.length >>> 0;

        // 4. If IsCallable(callback) is false, throw a TypeError exception.
        // See: http://es5.github.com/#x9.11
        if (typeof callback !== 'function') {
          throw new TypeError(callback + ' is not a function');
        }

        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 1) {
          T = arguments[1];
        }

        // 6. Let A be a new array created as if by the expression new Array(len)
        //    where Array is the standard built-in constructor with that name and
        //    len is the value of len.
        A = new Array(len);

        // 7. Let k be 0
        k = 0;

        // 8. Repeat, while k < len
        while (k < len) {

          var kValue, mappedValue;

          // a. Let Pk be ToString(k).
          //   This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the HasProperty internal
          //    method of O with argument Pk.
          //   This step can be combined with c
          // c. If kPresent is true, then
          if (k in O) {

            // i. Let kValue be the result of calling the Get internal
            //    method of O with argument Pk.
            kValue = O[k];

            // ii. Let mappedValue be the result of calling the Call internal
            //     method of callback with T as the this value and argument
            //     list containing kValue, k, and O.
             mappedValue = callback.call(T, kValue, k, O);

            // iii. Call the DefineOwnProperty internal method of A with arguments
            // Pk, Property Descriptor
            // { Value: mappedValue,
            //   Writable: true,
            //   Enumerable: true,
            //   Configurable: true },
            // and false.

            // In browsers that support Object.defineProperty, use the following:
            // Object.defineProperty(A, k, {
            //   value: mappedValue,
            //   writable: true,
            //   enumerable: true,
            //   configurable: true
            // });

            // For best browser support, use the following:
            A[k] = mappedValue;
          }
          // d. Increase k by 1.
          k++;
        }

        // 9. return A
        return A;
      };
    }

More detail information, please refer the Array.prototype.map() method.

Besides, you could also try to add the following script in the head of the index.html page.

 <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js'></script>

If still not working, can you post enough code to reproduce the problem in a sample, it might be easier for us to narrow down the problem.

IE11 - Object doesn't support property or method 'contains'

Looking for a proper Polyfill I found this one

In case the link doesn't work, here is the code:

SVGElement.prototype.contains = function contains(node) {
    if (!(0 in arguments)) {
        throw new TypeError('1 argument is required');
    }

    do {
        if (this === node) {
            return true;
        }
    } while (node = node && node.parentNode);

    return false;
};

Edit
Here is the snippet from the question along with the polyfill suggested

const joint = window.joint;
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({    width: 1500,   /*200,*/    height: 1500,  /*200,*/    el: $('.paper-container'),    gridSize: 1,    drawGrid: true,    model: graph,    //defaultLink: new joint.shapes.app.Link,    //defaultConnectionPoint: joint.shapes.app.Link.connectionPoint,    interactive: { linkMove: false }});
$('.paper-container').append(paper.el);paper.render();    var member = function(x, y, rank, name, background, textColor) {
    textColor = textColor || "#000";
    var cell = new joint.shapes.org.Member({        position: { x: x, y: y },        attrs: {            '.card': { fill: background, stroke: 'none'},            '.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},            '.name': { text: name, fill: textColor, 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }        }    });    graph.addCell(cell);    return cell;};
function link(source, target, breakpoints) {
    var cell = new joint.shapes.org.Arrow({        source: { id: source.id },        target: { id: target.id },        vertices: breakpoints,        attrs: {            '.connection': {                'fill': 'none',                'stroke-linejoin': 'round',                'stroke-width': '2',                'stroke': '#4b4a67'            }        }
    });    graph.addCell(cell);    return cell;}
var bart = member(300, 70, 'CEO', 'Bart Simpson', '#30d0c6');var homer = member(90, 200, 'VP Marketing', 'Homer Simpson', '#7c68fd', '#f1f1f1');var marge = member(300, 200, 'VP Sales', 'Marge Simpson', '#7c68fd', '#f1f1f1');var lisa = member(500, 200, 'VP Production' , 'Lisa Simpson', '#7c68fd', '#f1f1f1');var maggie = member(400, 350, 'Manager', 'Maggie Simpson', '#feb563');var lenny = member(190, 350, 'Manager', 'Lenny Leonard', '#feb563');var carl = member(190, 500, 'Manager', 'Carl Carlson', '#feb563');

link(bart, marge, [{x: 385, y: 180}]);link(bart, homer, [{x: 385, y: 180}, {x: 175, y: 180}]);link(bart, lisa, [{x: 385, y: 180}, {x: 585, y: 180}]);link(homer, lenny, [{x:175 , y: 380}]);link(homer, carl, [{x:175 , y: 530}]);link(marge, maggie, [{x:385 , y: 380}]);

if (window.SVGElement && !SVGElement.prototype.contains) {  SVGElement.prototype.contains = function (node) {    if (!(0 in arguments)) {      throw new TypeError('1 argument is required');    }
    do {      if (this === node) {        return true;      }    } while (node = node && node.parentNode);
    return false;  };}
var rootNode = paper.el.querySelector('.joint-type-org-member');var card = paper.el.querySelector('.joint-type-org-member .card');console.log("rootNode.contains = ", rootNode.contains);console.log("rootNode.contains(card) = ", rootNode.contains(card));

<script src="https://unpkg.com/@babel/polyfill@7.4.4/dist/polyfill.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://resources.jointjs.com/demos/joint/node_modules/lodash/lodash.js"></script><script src="https://resources.jointjs.com/demos/joint/node_modules/backbone/backbone.js"></script>
<link href="https://resources.jointjs.com/demos/joint/build/joint.css" rel="stylesheet"/><script src="https://resources.jointjs.com/demos/joint/build/joint.js"></script>

<div class="paper-container"></div>

Object doesn’t support this property or method

This is just a guess but I suspect your problem is coming from line 53 of the DOMImplTrident.isOrHasChildImpl method.

return (parent === child) || parent.contains(child);

I am further guessing that you are encountering your errors on IE10? The reason I think you are running against IE10 is because GWT doesn't officially support IE10 with a separate DOM implementation. It would end up using the DOMImplIE9 implementation on IE10 which in turn uses the above method from DOMImplTrident for its 'isOrHasChild' implementation. I am wondering if line 47

if (parent.nodeType == 9) {

isn't actually returning 9 for the document node and thereby dropping into the 'else' statement for a document node and blowing up when it tries to access the 'contains' method. Perhaps IE10 doesn't implement those node methods the same as previous versions of IE? Not sure.

I don't have IE10 handy to test this theory out but that might be a good place to start. You could create your own JSNI method that makes similar node calls to test the theory and see if 'document.nodeType' does indeed return 9 or if 'node.contains' blows up on various types of nodes.

If that does turn out to be the problem. You could try a couple of things to fix/avoid the problem.

1. Try hooking up an GWT.setUncaughtExceptionHandler() in your entry point and just ignore the error altogether.

2. Stick a try/catch around the block of code in one of 'your' methods that is invoking the problem code and ignore the exception.

3. Try adding the following meta tag to your html file and see if rendering in IE10 as IE9 solves the problem.

   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   

4. Create a custom DOMImpl that extends DOMImplIE9 and overrides the 'isOrHasChild' method with your own custom method where you have control over what happens. For example

   package com.google.gwt.dom.client;
   
   public class DOMImplIE9Custom extends DOMImplIE9 {
       @Override
       public boolean isOrHasChild(Node parent, Node child) {
           // Do your own thing
       }
   }
   

Then you use deferred binding to switch out the DOMImplIE9 with your custom implementation like so:

<replace-with class="com.google.gwt.dom.client.DOMImplIE9Custom">
    <when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
    <when-property-is name="user.agent" value="ie9"/>
</replace-with>

Even if I am way off base and you aren't using IE10 you could still try the above ideas to work around the issue. Either that or do the ultimate fix and stop using IE altogether and avoid many hours of stress :) Hope that helps get you on the right track at least.

Getting Error Object doesn't support property or method 'attachEvent' in IE11 but work in IE8, IE9, IE10

In older versions of IE, attachEvent is used to attach an event handler for some event on some element. But as per the update here, starting with IE11, attachEvent is deprecated and you should use addEventListener instead.

IE has included support for addEventListener from IE9 and above only. So if you still need to support IE8, I suggest you use some cross-browser library like jQuery to bind event handlers instead of vanilla javascript.

As you're already using jQuery, you can bind events like below

$('#yourElement').on('click', function(){
   // do something when you click on yourElement
}); 

Aurelia: Object doesn't support property or method 'bind' in IE 11

bind is supported by IE since IE 9. Maybe you triggered other IE modes than IE 11.

You could try to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> in <head> section of html. I also found two similar threads you could refer to: thread 1, thread 2.

If the issue still persists, you could provide a minimal code sample to reproduce the issue.

---

Related Topics