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;

// 以上写法在第一篇博文有介绍过,主要是为了兼容什么来着 ?_-_? IFrame 系列4 ---- document.selection 全方位兼容解析以及TextRange[createTextRange,createRange]对象的深入解析 - Anikin - 眷恋天空的驴

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

【未完,待续】
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值