Javascript：记住文本的选定范围

我试图找到一种方法来记住/存储JScript textrange，然后将其应用回文本并将其转换为选择内容。Javascript：记住文本的选定范围

例如：在“设计模式”中包含文本“这是框架内的文本”的iframe中，用户hilights /选择“是文本”。

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

勒

有没有办法来

来源

2010-10-05 Krumelur

这个额外的iframe：你是否将原始iframe中的整个HTML复制到它？ – 2010-10-05 22:35:03

不复制它，但我们可以假设额外的iframe的内容是相同的。所以不知何故，我必须知道“第一个字被选中”，或“第三个图像”，或“第二个字和下一个段落和下表”，然后在额外的iframe中选择相同的东西。 – Krumelur 2010-10-06 12:29:11

我的编辑：添加了一些标签 – 2010-11-09 22:53:04

是的，有一种方法。 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>

test with jsFiddle

注意，此演示到目前为止是建立MSIE只有（你写过你喜欢用JScript做^^）。

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

来源

2010-10-06 22:35:42

这真是太棒了！让我想知道我对JScript的了解有多少！我会检查是否解决它的IE浏览器。如果是的话，我会让它适用于Firefox。非常感谢！！ – Krumelur 2010-10-07 20:56:49

但请解释一下：要在IE中选择一些东西，你需要指定像素的绝对坐标，并且IE知道要从那些坐标中选择什么？为什么需要分开处理对象？不是一切都是对象（链接，文本节点，表格，图像）？ – Krumelur 2010-10-07 20:58:02

这些对象（例如图像，表单元素）表示IE中的另一种范围“controlRange”。这种类型的范围具有与textRange不同的属性。例如，这种类型的范围不具有textRange的属性来确定位置或移动范围的开始/结束。这些范围表示的不仅仅是一个文本范围的DOM元素对象/秒。 http://msdn.microsoft.com/en-us/library/ms537447%28VS.85%29.aspx – 2010-10-07 21:17:20

Javascript：记住文本的选定范围

回答

相关问题