zoukankan      html  css  js  c++  java
  • 转:ie和firefox的区别:range操作

    //if firefox

    irange = window.getSelection().getRangeAt(0);

    // if ie

    irange = document.selection.createRange();

    我先说一下代码的目的:要获得当前用户鼠标拖选内容所在的节点类型,我个人的功能目的在于判断当前是否一个A节点,如果是,那么取得他的href。我们先看firefox:

    在firefox的dom标准,定义了一个属性我们可以直接使用它来获得所选内容的父节点,同时使用nodeName来获得当前节点的类型:

    irange.startContainer.nodeName;

    我在firefox里面alert了一下,如果当前你所选择的是一个文本节点,那么他会返回#text,但是如果所选择的正好是一个其他节点,那么,他会返回body,这样第一步要做的就是,假如所选内容正好是一个完整的节点,那么我们来获得它的节点类型,要注意的是,startContainer返回的并不是当前节点,而是高一级的,但是在dom标准下面还提供了一个startOffset属性,如果所选择的不是一个文本节点,那么他返回的是当前节点在父节点中的偏移量,也就是offset了,我们通过它可以获得当前所选的节点:

    if(irange.startContainer.nodeName != "#text"){

       var nodeOffset = irange.startOffset;

       var selectedNode = irange.startContainer.childNodes[nodeOffset];

    }

    那么我们通过selelectedNode.nodeName便可得到节点类型了。上面所说的仅仅是一种情况,还有一种情况就是用户所选择的内容是<A>标签内的文本内容的一部分,那么,虽然获得的startContainer为#text,但是他的parentNode却是一个A,那么有了上面的知识,这个问题就很容易解决了:

    if(irange.startContainer.nodeName == "#text"){

       if(irange.startContainer.parentNode.nodeName == "a"){

          ......do sth // 那么,这里的irange.startContainer.parentNode就是那个A节点了

       }

    }

    这是在firefox中的操作,如果我们要修改获得的那个A节点的href,那么只需要把获得的节点对象存储在一个变量中,然后直接修改他的href就可以了。

    在ie下面,上面的两种情况就合二为一了,在ie中获得的range对象,不能直接使用parentNode来获得他的上级节点,而是要使用parentElement()方法的parentNode来获得:

    irange.parentElement().parentNode.nodeName

    这样我们就可以获得它的节点类型了,在firefox中我们所说的到的两种情况使用这个方法来获得的结果都是一样,所以不需要分情况处理。

    我用这个方法是用于在线编辑器,用来定义链接的,简单的办法,在ie下面可以使用execCommand('insertLink')。但是这个方法在firefox下面无效。

    在这里推荐一本好书:

    O'REILLY 的 <<JavaScript权威指南>>

    写到这里,功能我已经写完了,但是测试的不是完全,尚不知道其中是否存在某些错误。仅作笔记之用。

    以上方法通过Microsoft Internet Explorer 6.0和Mozilla Firefox 1.5的测试。

     

    IE 和 Firefox中取得createRange()的起点和终点的值

    http://www.blogjava.net/sealyu/archive/2010/06/08/323099.html

    Range对象详解

    http://hi.baidu.com/huominghao/blog/item/e3b127f26ca9e030730eecc2.html

  • 相关阅读:
    Asp.Net MVC4入门指南(3):添加一个视图
    Asp.Net MVC4入门指南(2):添加一个控制器
    Asp.Net MVC4入门指南(1): 入门介绍
    .net平台借助第三方推送服务在推送Android,IOS消息(极光推送_V2版本)
    ASP.NET网站实现中英文转换(本地化资源)
    .net 内置对象之Session对象和Session的过期时间
    SQL 单表分页存储过程和单表多字段排序和任意字段分页存储过程
    Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。
    C# WebBrowser控件详解
    html .net 网页,网站标题添图标
  • 原文地址:https://www.cnblogs.com/yingzi/p/2517336.html
Copyright © 2011-2022 走看看