2

JScript テキスト範囲を記憶/保存し、それをテキストに適用して選択範囲に変換する方法を見つけようとしています。

例: 「デザインモード」にあり、「これはフレーム内のテキストです」というテキストを含む iframe で、ユーザーは「テキストです」をハイライト/選択します。

使用可能なすべての範囲メソッドを使用して、その選択を読み取ることができます。今のところ問題ありません。ボタンをクリックすると、最初の iframe と同じテキストを含む別の iframe が作成され、最初の iframe が削除されます。その 2 番目の iframe では、ユーザーが最初のフレームで選択したのと同じテキストを選択したいと考えています。ここで問題が発生します。iframe 1 の範囲オブジェクトを iframe 2 に使用することはできません。どういうわけか、範囲オブジェクトはそのソース要素に関連付けられているようです。範囲を設定しても、効果がないか、奇妙なエラーが発生します。選択した WAS を再選択するにはどうすればよいですか?

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 に答える