在 IE 上使用 Selection.getRangeAt 时出现“IndexSizeError”答案

【问题标题】："IndexSizeError" when using Selection.getRangeAt on IE在 IE 上使用 Selection.getRangeAt 时出现“IndexSizeError”
【发布时间】：2018-11-23 18:53:32
【问题描述】：

在现代浏览器的 contenteditable div 上运行 window.getSelection().getRangeAt(0) 时，按预期工作， Internet Explorer 在某些情况下会引发“IndexSizeError”异常。

当 Selection 对象的 AnchorNode 是 TextNode 而不是 HTML 节点时会发生这种情况。

我想也许我会为此找到一个 polyfill，但似乎不存在。

是否有任何快速解决方案或使用getRangeAt() 的替代方法？

【问题讨论】：

标签： javascript internet-explorer polyfills legacy-code

【解决方案1】：

我发现 Safari Mobile 上也发生了同样的事情： IndexSizeError: The index is not in the allowed range.

我发现了这篇关于它的帖子： Creating a Range object from a Selection object on Safari

使用此代码：

var rangeObject = getRangeObject(userSelection);

function getRangeObject(selectionObject) {
    if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        return range;
    }
}

根据我的需要进行一些调整后：

    var range = document.createRange();
        if(selectionObject.anchorNode) {
          range.setStart(selectionObject.anchorNode ,selectionObject.anchorOffset);
          range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        } 
        else {
          range.setStart(div_element ,selectionObject.anchorOffset);
          range.setEnd(div_element, selectionObject.focusOffset);           
        }

该条件适用于 div 为空且 anchorNode 为 null 的情况 - 所以在这种情况下它应该使用 div_element 本身。如果有anchorNode（包括TextNode类型），第一部分同样适用于IE和safary mobile。

【讨论】：