gpt4 book ai didi

selection - Javascript:记住选定的文本范围

转载 作者:行者123 更新时间:2023-11-30 06:06:52 25 4
gpt4 key购买 nike

我正在尝试找到一种方法来记住/存储 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>

test with jsFiddle

请注意,到目前为止,这个演示只是为 MSIE 构建的(你写道你喜欢用 JScript 来做^^)。

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

关于selection - Javascript:记住选定的文本范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3868232/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com