我正在尝试找到一种方法来记住/存储 JScript 文本范围，然后将其应用回文本并将其转换为选区。
示例:在处于“设计模式”且包含文本“This is text inside the frame”的 iframe 中，用户高亮/选择“是文本”。
我可以使用所有可用的范围方法读取该选择。到目前为止没问题。 现在单击一个按钮创建另一个 iframe，其中包含与第一个 iframe 相同的文本，并且第一个 iframe 被删除。在第二个 iframe 中，我想选择用户在第一帧中选择的相同文本。 现在问题开始了:来自 iframe 1 的范围对象不能用于 iframe 2。范围对象似乎以某种方式绑定(bind)到它的源元素。设置范围要么没有效果，要么出现奇怪的错误。 我如何重新选择 WAS 选择的内容？
最佳答案
是的，有办法。 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>
请注意，到目前为止，这个演示只是为 MSIE 构建的(你写道你喜欢用 JScript 来做^^)。
但它也应该可以在其他浏览器上实现。
关于selection - Javascript:记住选定的文本范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3868232/