JavaScript选择的文本位置相对于父
JavaScript selected text position with respect to parent
我正在寻找文本的开始和结束的选择。
我的HTML结构是这样的:<div id="viewer">
<iframe id="epubjs-iframe:eb39fd66-ffb7-48b2-add9-a2764fc0ad74" width="100%" height="100%" scrolling="no" style="border: medium none; visibility: visible;" s6745771569="true" replaced="true">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" style="overflow: hidden; width: 18825px; height: 496px; -moz-column-fill: auto; -moz-column-gap: 156px; -moz-column-width: 547px;">
<head>
`enter code here`<body style="margin: 0px; font-size: 100%;">
<p id="1_p_6" class="indent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</body>
</html>
</frame>
</div>
,我使用这个JavaScript方法:
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
return caretOffset;
}
在我的情况下,preCaretRange.selectNodeContents(element);
给出了一个错误:
TypeError: Argument 1 of Range.selectNodeContents does not implement interface Node.
工作示例如下:
http://jsfiddle.net/TjXEG/496/这是正确的解决方案。
function getCaretCharacterOffsetWithin(objectId, win)
{
var startOffSet = 0;
var endOffset = 0;
var element = window.frames[0].document.getElementById(objectId);
var parentInnerHTML = element.innerHTML.toString();
var parentNodeArr = parentInnerHTML.split('');
if(parentInnerHTML != "null"){
var sel;
if (typeof win.getSelection != "undefined")
{
var rangeIndex = 0;
var parentIndex = 0;
var max = parentInnerHTML.length - 1;
var range = win.getSelection().toString();
var rangeNodeArr = range.split('');
var rangeLen = rangeNodeArr.length - 1;
for (parentIndex=0; parentIndex <= max; parentIndex++)
{
if(parentNodeArr[parentIndex] === rangeNodeArr[rangeIndex]){
if(rangeIndex === rangeLen){
break;
}
rangeIndex++;
}else{
rangeIndex = 0;
}
}
endOffset = parentIndex + 1;
startOffSet = parentIndex - rangeIndex;
}
console.log("startOffSet: " + startOffSet + " endOffset: " + endOffset);
return { startOffSet: startOffSet, endOffSet: endOffset };
}else{
console.log("Parent is null");
}
}
相关文章:
- 我可以获得相对于被点击元素的确切点击位置吗
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- Javascript元素相对于屏幕的位置
- 块相对于父对象的位置
- 获取插入符号相对于行可见起点的位置
- 获取相对于窗口的IFRAME位置
- 三.js - 如何获取相机相对于原点的位置
- 使用jQuery相对于元素的位置滑动元素
- Javascript/Canvas-查找相对于坐标网格位置的鼠标坐标
- 获取元素相对于父容器的位置/偏移量
- 获取元素相对于视口顶部的位置
- 如何确定相对于内部每个字符的页面的位置(x,y)跨越javascript
- Jquery ui 位置,不能使其相对于当前项
- 相对于文件系统而不是网站,源映射文件位置更少
- 粘性标头 - 相对于动态标头长度的正文位置
- 如何使页面的一部分始终相对于屏幕处于同一位置
- 跟踪鼠标相对于起始拖动位置HTML5,Ember
- 三.js - 保持对象相对于相机的位置静态
- 相对于另一个元素的位置元素不起作用
- 如何检查数组的哪些元素相对于位置匹配