Question

我正在一个项目中，用户可以突出显示PDF文件中的文本，然后使用getSelection（），getRangeAt（）和getClientRects（）保存突出显示的边界，以备将来参考。我遇到的问题是，如果所选内容与position：absolute的元素交叉，则Microsoft Edge在执行getRangeAt（0）时似乎出现错误。请参阅下面的小提琴，并查看Edge（已损坏）和Chrome / Firefox（按预期运行）中的控制台。在Edge中运行后，删除position：absolute样式并再次运行，Edge现在可以正确返回预期的矩形。

http://jsfiddle.net/Lbgce2km/2/

document.addEventListener('mouseup', function(e) {
  let sel = window.getSelection();
  let range = sel.getRangeAt(0);
  let rects = range.getClientRects();
  
  //check console for result.
  console.log('Rects:  ', rects);
});

div {
  position:absolute
}

    <div style='margin-top: 10px'>Microsoft Edge is the default web browser on Windows 10, Windows 10 Mobile, and Xbox One consoles, replacing Internet Explorer 11 and Internet Explorer Mobile. engine</div>
    <div style='margin-top: 75px' >
    Microsoft initially announced that Edge would support the legacy Trident (MSHTML) layout engine for backwards compatibility, but later said that, due to "strong feedback", Edge would use a new engine, while Internet Explorer would continue to provide the legacy
    </div>
    <div style='margin-top: 175px'>
      The browser includes an integrated Adobe Flash Player (with an internal whitelist allowing Flash applets on Facebook websites to load automatically, bypassing all other security controls requiring user activation)[15] and a PDF reader. It also supports asm.js.
    </div>

我尝试通过创建附加范围，将位置设置为所选范围的位置，然后提取所选范围的内容并将其插入到附加范围内，然后返回跨度，但当然不合适。

const sel = window.getSelection();
const range = sel.getRangeAt(0)

let addRange = document.createRange();
addRange.setStart(sel.anchorNode, sel.anchorOffset);
addRange.setEnd(sel.focusNode, sel.focusOffset);
let span = document.createElement("span");
let con = range.extractContents();
span.appendChild(con);
addRange.insertNode(span);

有人对可能的解决方法有任何建议吗？

MS Edge中的getRangeAt（0）错误，解决方法？

0 个答案: