javascript - 在 IE 上使用 Selection.getRangeAt 时出现“IndexSizeError”

Question

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

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

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

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

标签： javascriptinternet-explorerpolyfillslegacy-code

Answer 1

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

我发现了这篇关于它的帖子： 从 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上也能正常工作。