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：記住文本的選定範圍

回答

相關問題