我想在我的网页上选择特定范围。如果元素被隐藏，IE (Internet Explorer) 和 Edge 会给出错误。如何向文档中的隐藏元素添加选择？
示例
<html>
<head>
<meta name="robots" content="noindex">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#d2{
display:none;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<a onclick="doSel()" href="javascript:void(0)">click me:)</a>
<script id="jsbin-javascript">
function doSel(){
var element = $("#d2").contents()[0];
var myRange = createRange(element,1, element,2);
console.log(myRange);
document.getSelection().removeAllRanges();
document.getSelection().addRange(myRange);
}
function createRange(startContainer, startOffset, endContainer, endOffset){
var rangeObj = document.createRange ();
rangeObj.setStart (startContainer, startOffset);
rangeObj.setEnd (endContainer, endOffset);
return rangeObj;
}
</script>
</body>
</html>
在此页面中，我在 Firefox 和 Chrome 中选择 div#d2 中的“i”，但 IE 给出错误未指定错误，而 Edge 给出由于以下原因无法完成操作错误 800a025e。。这些错误在这一行抛出:document.getSelection().addRange(myRange);
如何解决该问题并向 IE 和 Edge 中的文档选择添加范围？
最佳答案
我进行了搜索，但找不到任何关于错误原因的解释。
解决方法是，如果元素具有 display: none (但 Edge 确实如此)，Chrome/FF 都不会返回任何值，因此首先要实际检查这一点。如果它有 display:none，则传回一个空字符串。
我还尝试了下面的演示，如果要抓取的元素有 display:none，则抓取上一个和下一个元素。
通过这个，我实际上能够获取 display:none 元素的文本，尽管它仅适用于 IE11。
测试:http://jsfiddle.net/p0k7jj12/2/
我所做的快速测试的部分代码
function doSel(){
var element3 = $("#d3").contents()[0];
var element2 = $("#d2").contents()[0];
var element1 = $("#d1").contents()[0];
var myRange = createRange(element1,4, element3,0);
console.log(myRange);
document.getSelection().removeAllRanges();
document.getSelection().addRange(myRange);
alert(document.getSelection());
}
关于javascript - 在 Internet Explorer 中添加对隐藏元素的选择会引发错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33164845/