IE11-对象不支持属性或方法&包含'

本教程将介绍IE11-对象不支持属性或方法&包含'的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

IE11-对象不支持属性或方法&包含' 教程 第1张

问题描述

使用Rappid我在IE11控制台中遇到错误:

Object doesn't support property or method 'contains'

此错误来自不具有该方法的SVGElement。Chrome中的相同代码可以运行。

我似乎需要为此缺少的方法填充PolyFill,但根据contains上的MDN文档,IE9和更高版本支持它,但SVGElement不支持它。

编辑:以下是一个代码片段-尝试在Chrome和IE11中运行

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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}]);

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://www.qumuban.com/redirect/aHR0cHM6Ly9yZXNvdXJjZXMuam9pbnRqcy5jb20vZGVtb3Mvam9pbnQvYnVpbGQvam9pbnQuY3Nz" target="_blank" rel="stylesheet"/>
<script src="https://resources.jointjs.com/demos/joint/build/joint.js"></script>



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

推荐答案

查找合适的填充this one

如果链接不起作用,代码如下:

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;
};

编辑
以下是问题的片段以及建议的填充

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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://www.qumuban.com/redirect/aHR0cHM6Ly9yZXNvdXJjZXMuam9pbnRqcy5jb20vZGVtb3Mvam9pbnQvYnVpbGQvam9pbnQuY3Nz" target="_blank" rel="stylesheet"/>
<script src="https://resources.jointjs.com/demos/joint/build/joint.js"></script>



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

好了关于IE11-对象不支持属性或方法&包含&#39;的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。