文章/答案/技术大牛

发布

社区首页 >问答首页 >TextRange offsetLeft和offsetTop在Internet 8标准模式(IE8)中中断

问TextRange offsetLeft和offsetTop在Internet 8标准模式(IE8)中中断
EN

Stack Overflow用户

提问于 2012-05-14 22:30:36

回答 3查看 2.5K关注 0票数 9

当找到文本范围的位置时，我似乎发现了Internet 8的一个问题--例如，当前选定的文本。我还没有在StackOverflow或其他地方找到任何关于这个问题的报告。

TextRange.offsetLeft和TextRange.offsetTop报告范围的左上角，在所有情况下，我在IE8中都看到它们大致正确，除非范围在IFrame内。当范围在IFrame内时，offsetLeft和offsetTop的值相对于IFrame在其父级中的位置移动负值。(见下文示例)

只有在下列情况下才会出现此问题：

浏览器是IE8
页面处于标准模式。

当下列情况下出现而不是时会出现此问题：

浏览器是IE7或IE10
该页面处于古怪模式。

我的问题：

其他人能证实这个问题吗?还是我疯了？
这是众所周知的问题吗？
有没有什么合理的解决方案或工作环境？(一个明智的解决方案是框架中的JS不需要知道它的父窗口的任何信息)

谢谢。

这个问题的一个例子：(参见IE8与IE9的区别)

<!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 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;
            }
        </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>

internet-explorer-8

textrange

回答 3

Stack Overflow用户

发布于 2012-05-24 18:17:51

我仍然认为这是IE8中的一个bug，但是有一个解决办法
在标准模式下，使用boundingLeft和boundingRight。但在古怪的模式下，使用offsetLeft和offsetRight

票数 3

Stack Overflow用户

发布于 2012-10-06 00:58:47

在过去，当试图在浏览器间获得一致的选择位置读取时，我回到了插入选择所在的span元素并从该元素中读取.这有点麻烦，但似乎更可靠。

通过这样处理事情，你应该完全避开那个特定的错误.不过，我不知道这是否会被归类为“理智”;)尽管它已经过测试，并且在所有这些用户代理中都能工作：

Mac 15/FF16 16
Mac 5.1.7
Mac 22
Mac 12
Win XP FF 3.6
Win XP Safari 3.1
Win XP IE7/IE8
Win 7 IE9
Win 7 FF15
Win 7 Chrome 22

(下面的代码依赖于jQuery，最好是1.8+ )

jsfiddle

http://jsfiddle.net/vCWha/

css

#__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;
}

javascript

(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>

票数 3

Stack Overflow用户

发布于 2012-10-10 20:01:11

我已经在我的IE8中测试了您的示例页面(在Windows上)，并且能够重现这个问题，所以我可以确认这个问题，但是我不能说它是否是一个已知的问题。

我在这个答案上找到了一个可行的解决方案(至少在IE8上是这样；我不能说它是否也适用于IE7或IE9，因为我没有这些版本的测试环境)。

下面是我修改的测试页面：

<!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>

也看了一下兰迪图书馆

跨浏览器的JavaScript范围和选择库.它提供了一个简单的基于标准的API，用于在所有主要浏览器中执行常见的DOM范围和选择任务，从而抽象出Internet之间到版本8和兼容DOM的浏览器之间这种功能的非常不同的实现。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10591903

复制

相似问题

问TextRange offsetLeft和offsetTop在Internet 8标准模式(IE8)中中断
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TextRange offsetLeft和offsetTop在Internet 8标准模式(IE8)中中断EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TextRange offsetLeft和offsetTop在Internet 8标准模式(IE8)中中断
EN