IFrame 系列4 ---- document.selection 全方位兼容解析以及TextRange[createTextRange,createRange]對象的深入解析

開篇： 在上一篇  ifame3 博文中 使用兩個操作文字選中方法： createTextRange  ||  setSelectionRange，但是這兩個api是建立在  想要選準那部分文字，但是 並沒有說明選準的那部分文字是什麼  這個問題依然沒有交代清楚。做什麼、是什麼這麼噁心的東西算是引入這篇的主要意圖吧，其實沒那麼繞口，最後你會發現，原來他孃的是一個媽生的，都姓旺。

首先分享一個函數，在非iframe狀態下，測試該函數全兼容【 env: win8.1  x64  i5 】

function getSelectedText() {
var txt = "";
if (document.selection) {
//ie8 非標準狀態下面
txt = window.document.selection.createRange().text
}else{
// ie11 chrome ff window.getSelection|| document.getSelection
txt = window.getSelection()||window.document.getSelection();
}
return txt;
}

但是既然該系列是面向iframe的，因此我們也就需要一個在 iframe 環境下也可以執行的函數，寫法以後雷同，不在贅述同類型寫法。全兼容

var o = document.getElementById('editor');
var win = o.contentWindow;
var doc = o.contentDocument||o.contentWindow.document;

// 以上寫法在第一篇博文有介紹過，主要是爲了兼容什麼來着 ？_-_?

function getSelectedText() {
var txt = "";
if ( document.selection ) {
txt = doc.selection.createRange().text;
}else{
txt = win.getSelection()|| doc.getSelection();
}
return txt;
}

以上兩個函數中明顯可以看出來一個東西那就是 document.selection 這是什麼鬼，今天的主角就是它。

關於document.selection 最常見的就是在一些插件中，關於寫法不在追究，其實一般的寫法只是爲了判斷當前瀏覽器是不是現代瀏覽器而已【 劃重點：此處的現代瀏覽器非現代瀏覽器請自行百度，絕非簡單的ie非ie 】

通過上面兩個函數，我們可以認爲：

非標準瀏覽器： document.selection

標準瀏覽器：    window.getSelection() || window.document.getSelection()

詳 細介紹這個屬性，就不在做兼容說明，所有兼容是基於前面說過的寫法雷同，document.selection 介紹

document.selection 表示當前網頁中的選中內容。代表了當前激活選中區，即高亮文本塊，和/或文檔中用戶可執行某些操作的其它元素。 selection對象的典型用途是作爲用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者作爲某一操作的結果輸出給用戶。

  

主要使用的方法有：

• clear()           　  清除選中的內容
• empty()　           取消選中
• createRange()　返回 TextRange  這個方法看着是不是很眼熟，對上一篇中有一個 createTextRange，這兩個到底是什麼淵源？

  對象或元素不同，雖然都是返回TextRange。例如：
  var r= document.body.createTextRange()
  var r= document.createRange()
  createTextRange 可以對body、TEXTAREA、BUTTON創建 TextRange。

                                                                                                                             -------來自百度知道團隊的  temp_1018 的精闢回答

屬性有： 

• type　選中內容的類型
• typeDetail 不支持

引申----到這裏，我們又發現上面兩個函數的返回值都有一個 TextRange ，這個TextRange又是個什麼東西呢？

TextRange 對象是動態HTML(DHTML)的高級特性，使用它可以實現很多和文本有關的任務，例如搜索和選擇文本。文本範圍讓您可以選擇性的將字符、單詞和句子從 文檔中挑選出來。TextRange 對象是在HTML文檔將要顯示的文本流上建立開始和結束位置的抽象對象

下面是TextRange的常用屬性與方法：

屬性

   boundingHeight    獲取綁定TextRange對象的矩形的高度

   boundingLeft        獲取綁定TextRange 對象的矩形左邊緣和包含TextRange對象的左側之間的距離

   offsetLeft              獲取對象相對於版面或由offsetParent屬性指定的父座標的計算左側位置

   offsetTop              獲取對象相對於版面或由offsetParent屬性指定的父座標的計算頂端位置

   htmlText               獲取綁定TextRange對象的矩形的寬度

   text                      設置或獲取範圍內包含的文本

方法

   moveStart             更改範圍的開始位置

   moveEnd              更改範圍的結束位置

   collapse                將插入點移動到當前範圍的開始或結尾

   move                     摺疊給定文本範圍並將空範圍移動給定單元數

   execCommand     在當前文檔、當前選中區或給定範圍上執行命令

   select                    將當前選擇區置爲當前對象

   findText                  在文本中搜索文本並將範圍的開始和結束點設置爲包圍搜索字符串。

使用TextRange對象通常包括三個基本的步驟:

     1.創建文本範圍

     2.設置開始點和結束點

     3.對範圍進行操作

兼容的定位光標位置的寫法：

function setLocation(elm, n) {
if(n > elm.value.length)
n = elm.value.length;
if(elm.createTextRange) { // IE
var textRange = elm.createTextRange();
textRange.moveStart('character', n); // 也可以是 rng.move("character",n);

textRange.collapse();
textRange.select();
} else if(elm.setSelectionRange) { // Firefox
elm.setSelectionRange(n, n);
elm.focus();
}
}

【未完，待續】