2

我正在尝试找到一种方法来记住/存储 JScript 文本范围，然后将其应用回文本并将其转换为选择。

一个例子：在一个处于“设计模式”并包含文本“这是框架内的文本”的 iframe 中，用户突出显示/选择“是文本”。

我可以使用所有可用的范围方法来读取该选择。到目前为止没有问题。现在单击一个按钮会创建另一个 iframe，其中包含与第一个相同的文本，并且第一个 iframe 会被删除。在第二个 iframe 中，我想选择用户在第一帧中选择的相同文本。现在问题开始了：iframe 1 中的范围对象不能用于 iframe 2。范围对象似乎以某种方式与其源元素绑定。设置范围没有效果或奇怪的错误。我怎样才能重新选择任何被选择的东西？

4

1 回答 1

1

是的，有办法。textRange 提供了许多方法/属性，例如确定位置。

因此，如果您说这不是真正的副本，而是相同的，您可以获取 frame1 的位置并在 frame2 中创建一个新的选择。

我玩了一下，结果如下：

<html>
  <head>
  <title>title</title>

  <script type="text/jscript">

  function cloneSelection()
  {
    if(!document.all || window.opera)
    {
      alert('this is an jscript-example for MSIE5+');
      return;
    }
    var editors=window.frames;  
        editors[0].focus();

    //create 2 ranges in the first iframe 
    var r1=editors[0].document.selection.createRange();
    var r2=editors[0].document.selection.createRange();

    //checkout if a control is selected
    if(editors[0].document.selection.type==='Control')
    {    
      var obj=r1.item(0);
      var objs=editors[0].document.body.getElementsByTagName(obj.tagName);

      //iterate over the elements to get the index of the element
      for(var i=0;i<objs.length;++i)
      {
        if(objs[i]===obj)
        {
          //create a controlRange, add the found control and select it
          var controls=editors[1].document.body.createControlRange();
              controls.add(editors[1].document.body.getElementsByTagName(obj.tagName)[i]);
              controls.select()
          return;
        }
      }
      //control-branch done
    }

    //no control was selected, so we work with textRanges  
    //collapse the 2nd range created above 
    r2.collapse(false); 

    //store the positions of the 2 ranges
    var x1=r1.offsetLeft;
    var y1=r1.offsetTop;
    var x2=r2.offsetLeft;
    var y2=r2.offsetTop;

    //create ranges in the 2nd iframe and move them to the stored positions
    var r2=editors[1].document.body.createTextRange();
        r2.moveToPoint(x1,y1);
    var r3=editors[1].document.body.createTextRange();
        r3.moveToPoint(x2,y2);

    //set the move the end of the first range to start of the 2nd range
    r2.setEndPoint('EndToStart',r3);

    //select the first range
    r2.select(); 
  }


  //fill the iframes and make them editable
  window.onload=function()
  {
    var editors=window.frames;
    for(var i=0;i<frames.length;++i)
    {
      with(frames[i].document)
      {
        open();
        write('This is text is an image '+
              '<br/><img src="http://sstatic.net/ads/img/careers-ad-header-so.png"><br/>'+
              'this is inside this frame');
        designMode='On';
        close();
      }
    }
  }
  </script>

  <style type="text/css">
  <!--
  iframe{width:400px;height:200px;}
  -->
  </style>
  </head>

  <body>
    <center>
      <iframe src="about:blank"></iframe>
      <input type="button" value="cloneSelection()" onclick="cloneSelection()">
      <iframe src="about:blank"></iframe>
    </center>
  </body>
</html>

用 jsFiddle 测试

请注意，到目前为止，此演示仅针对 MSIE 构建（您写过您喜欢使用 JScript^^）。

但也应该可以为其他浏览器实现它。

于 2010-10-06T22:35:42.930 回答