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(); 
    } 
} 

【未完，待续】