Internet explorer 8 溶质； 左：50px； 顶部：50px； } #斗牛士{ 位置：绝对位置； 背景色：红色； 宽度：5px； 高度：5px； } iframe{ 利润率：10px 75px； } （函数（$）{ var bullsEye=$（''），span=$（''）.get（0）； ///此处缺少var是为了使函数可以全局访问 目标=函数（）{ moveSelectionToElement（document.getElementById（'target'））； 斗牛士 .css（getSelectionTopLeft（）） .附于（“主体”）； } ///因为selectNodeContents似乎在我们选择的节点之外进行选择 ///需要我们自己的rangeToNodeContents，只突出显示文本节点 ///这是代码插入范围和选择的副作用。 var rangeToNodeContents=函数（r，节点）{ var i，l，tns=[]； if（node.nodeType==1&&node.childNodes&&l=node.childNodes.length））{ 对于（i=0；i 1）{ r、 setStart（tns[0]，0）； r、 setEnd（tns[tns.length-1]，tns[tns.length-1].nodeValue.length）； } 否则{ r、 选择NodeContents（节点）； } } } 否则{ r、 选择NodeContents（节点）； } } ///跨浏览器选择创建者 var moveSelectionToElement=函数（elm）{ 变量s，w，r，d；w=窗口；d=文档； if（w.getSelection&&d.createRange）{ s=w.getSelection（）； r=d.createRange（）； rangeToNodeContents（白杨、榆树）； s、 删除所有范围（）； s、 addRange（r）； }else if（d.selection&&d.body&&d.body.createTextRange）{ r=elm.createTextRange（）； r、 选择（）； } } ///跨浏览器getSelectionTopLeft var getSelectionTopLeft=函数（）{ 变量s，e，a，p，o，r，t；o={left:0，top:0}； 试一试{ 如果（window.getSelection）{ s=window.getSelection（）； r=s.getRangeAt（0）； a=r.startContainer； p=a.parentNode； if（a.nodeType==3）{ t=a.splitText（r.startOffset）； p、 插入前（跨度，t）； } else if（a.nodeType==1）{ p、 插入前（span，a）； } o=$（span.offset（）； } else if（（s=document.selection）&（s.type！=“Control”））{ r=s.createRange（）； r、 移动（'字符'，0）； $（'#u_uspan_u'）。删除（）； r、 粘贴HTML（span.outerHTML）； o=$（'#uu span_u'）.offset（）； } 如果（o&&o.left==0&&o.left==o.top）{ e=跨度； while（例如offsetParent）{ o、 左+=东偏左； o、 top+=e.offsetTop； e=e.抵销母公司； } } }捕获（ex）{} 返回o； } })（jQuery的类型！=“未定义”&&jQuery）； 目标abc测试 如果（window.parent==window）{ 文件。写（“”）； }
我已经在我的IE 8（在Windows XP上）中测试了您的示例页面，并且我能够重现该问题，因此我可以确认该问题，但我不能说它是否是已知问题。Internet explorer 8 溶质； 左：50px； 顶部：50px； } #斗牛士{ 位置：绝对位置； 背景色：红色； 宽度：5px； 高度：5px； } iframe{ 利润率：10px 75px； } （函数（$）{ var bullsEye=$（''），span=$（''）.get（0）； ///此处缺少var是为了使函数可以全局访问 目标=函数（）{ moveSelectionToElement（document.getElementById（'target'））； 斗牛士 .css（getSelectionTopLeft（）） .附于（“主体”）； } ///因为selectNodeContents似乎在我们选择的节点之外进行选择 ///需要我们自己的rangeToNodeContents，只突出显示文本节点 ///这是代码插入范围和选择的副作用。 var rangeToNodeContents=函数（r，节点）{ var i，l，tns=[]； if（node.nodeType==1&&node.childNodes&&l=node.childNodes.length））{ 对于（i=0；i 1）{ r、 setStart（tns[0]，0）； r、 setEnd（tns[tns.length-1]，tns[tns.length-1].nodeValue.length）； } 否则{ r、 选择NodeContents（节点）； } } } 否则{ r、 选择NodeContents（节点）； } } ///跨浏览器选择创建者 var moveSelectionToElement=函数（elm）{ 变量s，w，r，d；w=窗口；d=文档； if（w.getSelection&&d.createRange）{ s=w.getSelection（）； r=d.createRange（）； rangeToNodeContents（白杨、榆树）； s、 删除所有范围（）； s、 addRange（r）； }else if（d.selection&&d.body&&d.body.createTextRange）{ r=elm.createTextRange（）； r、 选择（）； } } ///跨浏览器getSelectionTopLeft var getSelectionTopLeft=函数（）{ 变量s，e，a，p，o，r，t；o={left:0，top:0}； 试一试{ 如果（window.getSelection）{ s=window.getSelection（）； r=s.getRangeAt（0）； a=r.startContainer； p=a.parentNode； if（a.nodeType==3）{ t=a.splitText（r.startOffset）； p、 插入前（跨度，t）； } else if（a.nodeType==1）{ p、 插入前（span，a）； } o=$（span.offset（）； } else if（（s=document.selection）&（s.type！=“Control”））{ r=s.createRange（）； r、 移动（'字符'，0）； $（'#u_uspan_u'）。删除（）； r、 粘贴HTML（span.outerHTML）； o=$（'#uu span_u'）.offset（）； } 如果（o&&o.left==0&&o.left==o.top）{ e=跨度； while（例如offsetParent）{ o、 左+=东偏左； o、 top+=e.offsetTop； e=e.抵销母公司； } } }捕获（ex）{} 返回o； } })（jQuery的类型！=“未定义”&&jQuery）； 目标abc测试 如果（window.parent==window）{ 文件。写（“”）； },internet-explorer-8,textrange,Internet Explorer 8,Textrange,我已经在我的IE 8（在Windows XP上）中测试了您的示例页面，并且我能够重现该问题，因此我可以确认该问题，但我不能说它是否是已知问题。 我在上找到了一个有效的解决方案（至少在IE 8上是这样；我不能说它在IE 7或IE 9上是否也有效，因为我没有这些版本的测试环境）。 这是我修改过的测试页面： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos
我在上找到了一个有效的解决方案（至少在IE 8上是这样；我不能说它在IE 7或IE 9上是否也有效，因为我没有这些版本的测试环境）。
这是我修改过的测试页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script type="text/javascript" charset="utf-8">
function getSelectionTopLeft() {
var x = 0, y = 0; // Use standards-based method only if Range has getBoundingClientRect
if (window.getSelection && document.createRange &&
typeof document.createRange().getBoundingClientRect != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var rect = sel.getRangeAt(0).getBoundingClientRect();
x = rect.left;
y = rect.top;
}
} else if (document.selection && document.selection.type != "Control") { // All versions of IE
var textRange = document.selection.createRange();
x = textRange.boundingLeft;
y = textRange.boundingTop;
}
return { x: x, y: y };
}
function target() {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('target'));
range.select();
var bullsEye = document.createElement('div');
bullsEye.id = 'bullsEye';
bullsEye.style.left = range.offsetLeft + 'px';
bullsEye.style.top = range.offsetTop + 'px';
document.body.appendChild(bullsEye);
//document.getElementById('output').innerHTML = 'range.offsetLeft = ' + range.offsetLeft + ', range.offsetTop = ' + range.offsetTop;
var tl = getSelectionTopLeft();
document.getElementById('output').innerHTML = tl.x + ',' + tl.y;
}
</script>
</head>
<body>
<div id="target">Target</div>
<input type="button" value="Hit Target" onclick="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window) document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
</script>
</body>
</html>
IE8 IFrame文本范围位置测试页面
身体{
字体系列：Tahoma；
}
#目标{
背景色：#CCC；
位置：绝对位置；
左：50px；
顶部：50px；
}
#斗牛士{
位置：绝对位置；
背景色：红色；
宽度：5px；
高度：5px；
}
iframe{
利润率：10px 75px；
}
函数getSelectionTopLeft（）{
var x=0，y=0；//仅当范围具有getBoundingClientRect时才使用基于标准的方法
if（window.getSelection&&document.createRange&&
文档的类型。createRange（）.getBoundingClientRect！=“未定义”）{
var sel=window.getSelection（）；
如果（选择范围计数>0）{
var rect=sel.getRangeAt（0.getBoundingClientRect（）；
x=正左；
y=矩形顶部；
}
}else if（document.selection&&document.selection.type！=“Control”）{//IE的所有版本
var textRange=document.selection.createRange（）；
x=textRange.boundingLeft；
y=textRange.boundingTop；
}
返回{x:x，y:y}；
}
功能目标（）{
var range=document.body.createTextRange（）；
range.moveToElementText（document.getElementById（'target'）；
range.select（）；
var bullsEye=document.createElement（'div'）；
bullsEye.id=‘bullsEye’；
bullsEye.style.left=range.offsetLeft+'px'；
bullsEye.style.top=range.offsetTop+'px'；
文件.尸体.附肢儿童（bullsEye）；
//document.getElementById（'output'）。innerHTML='range.offsetLeft='+range.offsetLeft+'，range.offsetTop='+range.offsetTop；
var tl=getSelectionTop
#__span__ {
display: inline !important;
*display: inline-block !important; /* IE7 works better with inline-block */
}
/* you can obviously ignore these, they are just used to show accuracy */
.crosshair-v {
height: 0;
width: 20px;
border-bottom: 1px solid red;
position: absolute;
margin-left: -10px;
}
.crosshair-h {
height: 20px;
width: 0;
border-right: 1px solid red;
position: absolute;
margin-top: -9px;
}
(function($){
$(function(){
var span = $('<span id="__span__" />').get(0),
crv = $('<div class="crosshair-v" />'),
crh = $('<div class="crosshair-h" />');
$('body').append(crv).append(crh);
var getSelectionTopLeft = function(){
var s,e,a,p,o,r,t;
try{
/// IE9+, FF, Chrome, Safari, Opera
if ( window.getSelection ){
s = window.getSelection();
r = s.getRangeAt(0);
a = r.startContainer;
p = a.parentNode;
if ( a.nodeType == 3 ){
t = a.splitText(r.startOffset);
p.insertBefore(span, t);
}
else if ( a.nodeType == 1 ){
p.insertBefore(span, a);
}
o = $(span).position();
}
/// IE8-
else if ( (s = document.selection) && (s.type != 'Control') ) {
r = s.createRange();
r.move('character',0);
$('#__span__').remove();
r.pasteHTML(span.outerHTML);
o = $('#__span__').position();
}
/// quick fallback for certain older browsers for
/// whom $().position() fails.
if ( o && o.left === 0 && o.left === o.top ) {
e = span;
while( e.offsetParent ){
o.left += e.offsetLeft;
o.top += e.offsetTop;
e = e.offsetParent;
}
}
}catch(ex){}
return o;
}
$(document).mouseup(function(e){
/// execute our function to calculate the selection position
var o = getSelectionTopLeft();
if ( o ){
/// update the crosshair
crv.css(o);
crh.css(o);
}
});
});
})(typeof jQuery != 'undefined' && jQuery);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#__span__ {
display: inline !important;
display: inline-block !important;
min-height: 1em;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($){
var bullsEye = $('<div id="bullsEye" />'), span = $('<span id="__span__"></span>').get(0);
/// var is missed here on purpose to make the function globally accessible
target = function() {
moveSelectionToElement( document.getElementById('target') );
bullsEye
.css( getSelectionTopLeft() )
.appendTo('body');
}
/// because selectNodeContents seems to select outside the node we
/// need our own rangeToNodeContents that only highlights text nodes
/// this is a side effect of having code inserted ranges & selections.
var rangeToNodeContents = function(r, node){
var i, l, tns = [];
if ( node.nodeType == 1 && node.childNodes && (l = node.childNodes.length) ){
for ( i=0;i<l;i++ ){
if ( node.childNodes[i] && node.childNodes[i].nodeType == 3 ) {
tns.push(node.childNodes[i]);
}
if ( tns.length > 1 ) {
r.setStart(tns[0],0);
r.setEnd(tns[tns.length-1],tns[tns.length-1].nodeValue.length);
}
else {
r.selectNodeContents(node);
}
}
}
else {
r.selectNodeContents(node);
}
}
/// cross browser selection creator
var moveSelectionToElement = function(elm) {
var s,w,r,d; w = window; d = document;
if (w.getSelection && d.createRange) {
s = w.getSelection();
r = d.createRange();
rangeToNodeContents( r, elm );
s.removeAllRanges();
s.addRange(r);
} else if (d.selection && d.body && d.body.createTextRange) {
r = elm.createTextRange();
r.select();
}
}
/// cross browser getSelectionTopLeft
var getSelectionTopLeft = function(){
var s,e,a,p,o,r,t; o = {left:0,top:0};
try{
if ( window.getSelection ){
s = window.getSelection();
r = s.getRangeAt(0);
a = r.startContainer;
p = a.parentNode;
if ( a.nodeType == 3 ){
t = a.splitText(r.startOffset);
p.insertBefore(span, t);
}
else if ( a.nodeType == 1 ){
p.insertBefore(span, a);
}
o = $(span).offset();
}
else if ( (s = document.selection) && (s.type != 'Control') ) {
r = s.createRange();
r.move('character',0);
$('#__span__').remove();
r.pasteHTML(span.outerHTML);
o = $('#__span__').offset();
}
if ( o && o.left === 0 && o.left === o.top ) {
e = span;
while( e.offsetParent ){
o.left += e.offsetLeft;
o.top += e.offsetTop;
e = e.offsetParent;
}
}
}catch(ex){}
return o;
}
})(typeof jQuery != 'undefined' && jQuery);
</script>
</head>
<body>
<div id="target">Target <b>abc</b> test</div>
<input type="button" value="Hit Target" onmouseup="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window){
document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script type="text/javascript" charset="utf-8">
function getSelectionTopLeft() {
var x = 0, y = 0; // Use standards-based method only if Range has getBoundingClientRect
if (window.getSelection && document.createRange &&
typeof document.createRange().getBoundingClientRect != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var rect = sel.getRangeAt(0).getBoundingClientRect();
x = rect.left;
y = rect.top;
}
} else if (document.selection && document.selection.type != "Control") { // All versions of IE
var textRange = document.selection.createRange();
x = textRange.boundingLeft;
y = textRange.boundingTop;
}
return { x: x, y: y };
}
function target() {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('target'));
range.select();
var bullsEye = document.createElement('div');
bullsEye.id = 'bullsEye';
bullsEye.style.left = range.offsetLeft + 'px';
bullsEye.style.top = range.offsetTop + 'px';
document.body.appendChild(bullsEye);
//document.getElementById('output').innerHTML = 'range.offsetLeft = ' + range.offsetLeft + ', range.offsetTop = ' + range.offsetTop;
var tl = getSelectionTopLeft();
document.getElementById('output').innerHTML = tl.x + ',' + tl.y;
}
</script>
</head>
<body>
<div id="target">Target</div>
<input type="button" value="Hit Target" onclick="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window) document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
</script>
</body>
</html>