IE11 - 对象不支持 属性 或方法 'contains'
IE11 - Object doesn't support property or method 'contains'
使用 Rappid 我在 IE11 控制台中遇到错误：
Object doesn't support property or method 'contains'
此错误来自没有该方法的 SVGElement。 Chrome 中的相同代码有效。
似乎我需要为这个缺失的方法进行 polyfill，但根据 contains 上的 MDN 文档，IE9 及更高版本支持它，但 SVGElement[=32= 不支持].
编辑：这是一个片段 - 尝试在 Chrome 和 IE11
中 运行
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://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>
寻找合适的 Polyfill 我找到了 this one
如果 link 不起作用，这里是代码：
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;
};
编辑
这是问题的片段以及建议的 polyfill
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>
这里还有一个稍微简单一点的polyfill。这似乎适用于 IE11
if (!SVGElement.prototype.contains) {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}
我找到了这个 polyfill here
使用 Rappid 我在 IE11 控制台中遇到错误：
Object doesn't support property or method 'contains'
此错误来自没有该方法的 SVGElement。 Chrome 中的相同代码有效。
似乎我需要为这个缺失的方法进行 polyfill，但根据 contains 上的 MDN 文档，IE9 及更高版本支持它，但 SVGElement[=32= 不支持].
编辑：这是一个片段 - 尝试在 Chrome 和 IE11
中 运行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://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>
寻找合适的 Polyfill 我找到了 this one
如果 link 不起作用，这里是代码：
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;
};
编辑
这是问题的片段以及建议的 polyfill
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>
这里还有一个稍微简单一点的polyfill。这似乎适用于 IE11
if (!SVGElement.prototype.contains) {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}
我找到了这个 polyfill here