Question

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

示例：在“designmode”中的iframe中包含文本“This is the frame in the frame”，用户hilights /选择“is text”。

我可以使用所有可用的范围方法来读取该选择。到目前为止没问题。现在，点击按钮会创建另一个iframe，其中包含与第一个相同的文本，并删除第一个iframe。在第二个iframe中，我想选择用户在第一帧中选择的相同文本。现在问题开始了：来自iframe 1的范围对象不能用于iframe 2.不知何故，范围对象似乎与其源元素相关联。设置范围无效或奇怪的错误。如何重新选择所选的WAS？

Answer 1

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

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

我正在玩它一点点，这是结果：

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

<强> test with jsFiddle

请注意，到目前为止，此演示仅针对MSIE构建（您写的就像使用JScript ^^一样）。

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

Javascript：记住选定的文本范围

1 个答案: