Google Chrome和Chrome不支持Discontigious Selection错误

Question

Google Chrome和Chrome不支持Discontigious Selection错误

Saj*_*mad 10 javascript firefox jquery google-chrome chromium

我正在开发一个书签应用程序,我必须存储用户选择的关键字或单词或内容.我使用createRange()和addRange()javascript方法创建范围,然后由用户找出所选元素/内容.我为此编写的代码如下.

<head>
<script type="text/javascript">
    var storedSelections = [];

    function StoreSelection () {
        if (window.getSelection) {
            var currSelection = window.getSelection ();
            for (var i = 0; i < currSelection.rangeCount; i++) {
                storedSelections.push (currSelection.getRangeAt (i));
            }
            currSelection.removeAllRanges ();
        } else {
            alert ("Your browser does not support this example!");
        }
    }

    function ClearStoredSelections () {
        storedSelections.splice (0, storedSelections.length);
    }

    function ShowStoredSelections () {
        if (window.getSelection) {
            var currSelection = window.getSelection ();
            currSelection.removeAllRanges ();
            for (var i = 0; i < storedSelections.length; i++) {
                currSelection.addRange (storedSelections[i]);
            }
        } else {
            alert ("Your browser does not support this example!");
        }
    }
</script>
</head>
<body>
    Select some content on this page and use the buttons below.<br />         <br />
    <button onclick="StoreSelection ();">Store the selection</button>
    <button onclick="ClearStoredSelections ();">Clear stored selections
</button>
    <button onclick="ShowStoredSelections ();">Show stored selections</button>

</body>

Run Code Online (Sandbox Code Playgroud)

此代码在Firefox上完美运行.我可以逐个选择多个内容并且能够再次显示所选内容,但是在chrome和chromium上,Discontiguous selection is not supported.当我在范围数组中存储多个元素并单击show stored selections按钮时,我收到错误.

帮助将不胜感激.如果有其他替代方案可以完成此书签任务,请建议我.

Answer 1

Sha*_*dit 9

写

window.getSelection().removeAllRanges();

Run Code Online (Sandbox Code Playgroud)

在创建范围之前.

https://bugs.chromium.org/p/chromium/issues/detail?id=399791

Answer 2

Sig*_*uza 6

这是我能够提出的唯一可能的方法:

将选择包装进去<span style="background: Highlight;">...</span>.

但请注意:

显然,只要选择了其他任何东西,你就必须再次删除这些跨度,但这不应该太困难.但是,您应该使用window.onmousedown它,而不是window.onclick因为在按下任何按钮后onclick触发,因此当按下"显示存储的选择"按钮时,将创建一个新的选择,从而销毁应该捕获的那个.
删除或替换存储选择开始或结束的任何元素将使该选择无效,因此单击"显示存储的选择"时,不会显示任何内容.
如果选择跨越多个元素,则需要将每个元素拆分为一个选择,否则插入跨度将失败或将其他元素(如按钮)切成两半.

以下代码(小提琴)是我能做的最好的:

var storedSelections = [];
var simulatedSelections = [];

window.onmousedown = clearSimulatedSelections;

function storeSelection()
{
    if(window.getSelection)
    {
        var currSelection = window.getSelection();
        for(var i = 0; i < currSelection.rangeCount; i++)
        {
            storeRecursive(currSelection.getRangeAt(i));
        }
        currSelection.removeAllRanges();
    }
    else
    {
        alert("Your browser does not support this example!");
    }
}

function storeRecursive(selection, node, started)
{
    node = node || document.body;
    started = started || false;
    var nodes = node.childNodes;
    for(var i = 0; i < nodes.length; i++)
    {
        if(nodes[i].nodeType == 3)
        {
            var first = nodes[i] == selection.startContainer;
            var last = nodes[i] == selection.endContainer;
            if(first)
            {
                started = true;
            }
            if(started)
            {
                var sel = selection.cloneRange();
                if(!first)
                {
                    sel.setStartBefore(nodes[i]);
                }
                if(!last)
                {
                    sel.setEndAfter(nodes[i]);
                }
                storedSelections.push(sel);
                if(last)
                {
                    return false;
                }
            }
        }
        else
        {
            started = storeRecursive(selection, nodes[i], started);
        }
    }
    return started;
}

function clearStoredSelections()
{
    storedSelections = [];
}

function showStoredSelections()
{
    if(window.getSelection)
    {
        var currSelection = window.getSelection();
        currSelection.removeAllRanges();
        for(var i = 0; i < storedSelections.length; i++)
        {
            var node = document.createElement("span");
            node.className = "highlight";
            storedSelections[i].surroundContents(node);
            simulatedSelections.push(node);
        }
    }
    else
    {
        alert("Your browser does not support this example!");
    }
}

function clearSimulatedSelections()
{
    for(var i = 0; i < simulatedSelections.length; i++)
    {
        var sec = simulatedSelections[i];
        var pn = sec.parentNode;
        while(sec.firstChild)
        {
            pn.insertBefore(sec.firstChild, sec);
        }
        pn.removeChild(sec);
    }
    simulatedSelections = [];
}

Run Code Online (Sandbox Code Playgroud)

.highlight
{
    background: Highlight;
}

Run Code Online (Sandbox Code Playgroud)

Select some content on this page and use the buttons below.<br><br>
<button onclick="storeSelection();">Store the selection</button>
<button onclick="clearStoredSelections();">Clear stored selections</button>
<button onclick="showStoredSelections();">Show stored selections</button>

Run Code Online (Sandbox Code Playgroud)

它适用于Firefox,Safari和Chrome,但有以下缺点:

多行选择不会选择行尾和父元素边框之间的空白区域,就像实际选择一样.
有时,在存储选择开始之前的某个点开始选择时,显示它们将合并范围,因此也会选择其中的文本.对存储的选择数组进行排序似乎没有帮助.
在Safari中,当选择多行并在按钮文本中间结束/开始选择时,选项卡会因分段错误而多次崩溃.

但是,我怀疑除了Firefox之外的其他浏览器有什么更好的可能性,但即便是Firefox也有机会删除不连续的选择.

归档时间：	10 年，7 月前
查看次数：	10215 次
最近记录：	8 年，6 月前