js浏览器兼容性的写法

2023-10-27

大致有以下五大类:
1)元素查找问题
2)DOM操作
3)事件
4)语法
5)XML

一、元素查找问题:

1. document.all[name] 
(1)现有问题:Firefox不支持document.all[name] 
(2)解决方法:使用getElementsByName(name),getElementById(id)等来替代。

2. 集合类对象问题
(1)现有问题:IE中对许多集合类对象取用时可以用 (),但在Firefox只能用[]。
    如:IE中可以使用document.forms("formName")来返回名字为"formName"的Form,但在Firefox却行不通。

(2)解决方法:使用[],上例中可以改为document.forms["formName"]

3. HTML元素的ID在JavaScript可见
(1)现有问题:IE中HTML元素中的ID可以作为document的下属对象变量名直接使用。在Firefox中不能。

(2)解决方法:使用getElementById("idName")代替idName作为对象变量使用。

4. eval(idName)取得对象
(1)现有问题:在IE中,利用eval(idName)可以取得ID为idName的HTML对象,在Firefox中不能。

(2)解决方法:用 getElementById(idName) 代替 eval(idName)。

5. 变量名与某HTML对象ID相同
(1)现有问题:在Firefox中,因为对象ID不作为HTML对象的名称,所以可以使用与HTML对象id相同的变量名,IE中不能。
(2)解决方法:在声明变量时,一律加上var,以避免歧义,这样在IE中亦可正常运行。此外,最好不要取与HTML对象id相同的变量名,以减少错误。

注:3、4和5都属于同一类的问题。

6. Frame
(1)现有问题:在IE中可以用window.top.frameId和window.top.frameName来得到该Frame所代表的Window,Firefox中只能用window.top.frameName。
(2)解决方法:将Frame的Id和Name设置成相同,使用window.top.frameName来访问Frame。

二、DOM操作

1. 设置元素的文本内容。
(1)现有问题:IE使用innerText,而Firefox使用textContent来设置元素文本内容。
(2)解决方法:如果文本内容不包含"<"和">"等特殊字符,可以使用innerHTML。否则,可以使用:
    var child = elem.firstChild;
    if (child != null) elem.removeChild(child);

    elem.appendChild(document.createTextNode(content));

2. parentElement,parent.children
(1)现有问题:IE可以使用parentElement获得父结点,parent.children得到结点的所有孩子结点。Firefox不支持。

(2)解决方法:使用parentNode和parent.childNodes。

3. 对childNodes的解释。
(1)现有问题:IE和Firefox中对childNodes的解释不同,IE不会包含空白文本结点,而Firefox会包含。
(2)解决方法:使用childNodes过滤文本结点,如下:
      var children = elem.childNodes;
          for (i = 0; i < children.length; i++) {
            if (children[i].nodeType != 3) { // 过滤文本结点
              // ...
            }

          }

4. 对document.getElementsByName的解释。
(1)现有问题:IE中getElementsByName只会检查<input>和<img>元素,而在Firefox下会检查所有元素。

(2)解决方法:不要使用getElementsByName检查除<input>和<img>之外的元素,如果要获得单个元素,尽量使用getElementById。

5. 对document.getElementById的解释。
(1)现有问题:IE中getElementById不仅检查Id属性,也会检查Name属性,当Name属性匹配参数时也会返回该元素。而在Firefox中只会检查Id属性。
(2)解决方法:尽量保持Id和Name相同,不要让一个元素name属性和另一个元素的id属性相同。

三、事件

1. event.x与event.y问题
(1)现有问题:在IE中,event对象有x,y 属性,Firefox中没有。
(2)解决方法:在Firefox中,与event.x 等效的是 event.pageX。可以使用:

      mX = event.x ? event.x : event.pageX;

2. window.event
(1)现有问题:使用window.event无法在Firefox上运行
(2)解决方法:
         原代码(可在IE中运行):
            <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
            ...
            <script language="javascript">
                function gotoSubmit() {
                    ...
                    alert(window.event);    // use window.event
                    ...
                }
            </script>
        新代码(可在IE和Firefox中运行):
            <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
            ...
            <script language="javascript">
                function gotoSubmit(evt) {
                    evt = evt ? evt : (window.event ? window.event : null);
                    ...
                    alert(evt);             // use evt
                    ...
                }

            </script>

3. attachEvent和addEventListener
(1)现有问题:IE中使用attachEvent来添加事件,Firefox中使用addEventListener。
(2)解决方法:如下,注意事件参数的区别,一个是click,一个是onclick。
    if (document.attachEvent) document.attachEvent("click", clickHandler,false);
    else document.addEventListener("onclick",clickHandler);

四、语法

1. const
(1)现有问题:在IE中不能使用const关键字。如const constVar = 32;在IE中这是语法错误。

(2)解决方法:不使用const,以var代替。

2. 多余的逗号
(1)现有问题:firefox中对象文字常量容许多余的逗号,在IE中不允许。下面语句在IE中非法。
      var obj = { 'key' : 'aaa', }

(2)解决方法:去掉多余逗号。

五、XML

1. 创建XMLHttpRequest
(1)现有问题:Firefox使用XMLHttpRequest,IE使用ActiveXObject。
(2)解决方法:
      if (window.XMLHttpRequest) {
          req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          req = new ActiveXObject("Microsoft.XMLHTTP");

      }

2. 创建DOM
(1)现有问题:Firefox和IE创建DOM的方式不同。
(2)解决方法:
        function createXmlDom() {
          var oXmlDom;
          if (Window.ActiveXObject) { // IE
            oXmlDom = new ActiveXObject("Microsoft.XmlDom");
          } else {  // Firefox
            oXmlDom = document.implementation.createDocument("", "", null);
          }

        }

3. 加载XML
(1)现有问题:如果要加载外部文件IE和Firefox都可以用:
    oXmlDom.async=false;      // 这在Firefox中是必须的
    oXmlDom.load("test.xml");
    但是它们加载xml字符串的方式不一样,IE中直接可以使用oXmlDom.loadXML("<root><child/></root>"),而Firefox要使用DOMParser:
    var oParser = new DOMParser();
    var oXmlDom = oParser.parseFromString("<root/>", "text/xml");
(2)解决方法:比较好的方法是给Firefox产生的XMLDom加上loadXML方法:
        if (isFirefox) { // 需要浏览器检测
          Document.prototype.loadXML = function(sXml) {
            var oParser = new DOMParser();
            var oXmlDom = oParser.parseFromString(sXml, "text/xml");
            
            while (this.firstChild) this.removeChild(this.firstChild);
            
            for (var i = 0; i < oXmlDom.childNodes.length; i++) {
              var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
              this.appendChild(oNewNode);
            }
          }
        }

      这样在IE和Firefox就可以调用loadXML方法了。

4. XPath支持
(1)现有问题:IE中可以直接用XmlDOM的selectNodes来根据XPath表示式来选择结点,Firefox则比较复杂,需要使用XPathEvaluator。
     IE: 
        var lstNodes = oXmlDom.documentElement.selectNodes("employee/name");
        for (var i = 0; i < lstNodes.length; i++) {
          alert(lstNodes[i].firstChild.nodeValue);
        }
     Firefox: 
          var oEvaluator = new XPathEvaluator();
          var oResult = oEvaluator.evaluate("employee/name", oXmlDom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
          var oElement = oResult.iterateNext();
          while (oElement) {
            alert(oElement.firstChild.nodeValue);
            oElement = oResult.iterateNext();
          }
(2)解决方法:比较好的方法给Firefox的Element添加selectNodes方法。
        if (isFirefox) { // 需要浏览器检测
            Element.prototype.selectNodes = function(sXPath) {
            var oEvaluator = new XPathEvaluator();
              var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
              
              var aNodes = new Array();
              
              if (oResult != null) {
                var oElement = oResult.iterateNext();
                while (oElement) {
                  aNodes.push(oElement);
                  oElement = oResult.iterateNext();
                }
              }
              return aNodes;
           }
      }
这样在IE和Firefox中就都可以调用selectNodes方法了。

5. XSLT支持
(1)现有问题:IE中可以使用XmlDOM的transferNode方法将其转换成html,而Firefox需要使用XSLTProcessor。
  IE:
        oXmlDom.load("employee.xml");
        oXslDom.load("employee.xslt");
        var sResult=oXmlDom.transformNode(oXslDom);
    Firefox:
        var oProcessor = new XSLTProcessor();
        oProcessor.importStylesheet(oXslDom);
        var oResultDom = oProcessor.transformToDocument(oXmlDom);        
        var oSerializer = new XMLSerializer();
        var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
        alert(sXml);
  (2)解决方法:比较好的方法给Firefox的Node添加transferNode方法。
        if (isFirefox) { // 需要浏览器检测
          Node.prototype.transformNode = function(oXslDom) {
          var oProcessor = new XSLTProcessor();
            oProcessor.importStylesheet(oXslDom);
            var oResultDom = oProcessor.transformToDocument(oXmlDom);
            
            var oSerializer = new XMLSerializer();
            var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
            
            return sXml;
          }
        }
这样在IE和Firefox中就都可以调用transferNode方法了。


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js浏览器兼容性的写法 的相关文章

随机推荐

  • vintage、迁移率、滚动率、入催率等概念——看完你就懂了

    随着互联网金融的发展 对数据分析的需求越来越大 数据分析的目的其实是为了找到风险和收益的平衡点 高收益伴随着高风险 而低风险的回报又如同鸡肋 所以 太高的风险 太低的收益都不行 平衡点通俗来讲就是风险在控制范围之中 收益也可以接受 为了找到
  • ebay的api开发技术说明,有点乱

    使用eBay API的基本步骤引入 开始eBay API 例如 以下基本步骤需要 1 注册开发者账号 https developer ebay com join Default aspx 2 选择API类型 eBay有大约6种API 开发语
  • QT自定义控件类,无法获取真实宽度和高度

    问题 自定义控件类 无法获取真实的高度和宽度 代码如下 头文件 ifndef ROUNDEDTOOLTIP H define ROUNDEDTOOLTIP H include
  • sql关键字的执行顺序

    sql语句关键词的执行顺序 from gt on gt outer join gt where gt group by gt cube rollup gt having gt select gt distinct gt order by g
  • 实现ssh简便登录和利用Polysh实现多台服务器批量管理

    在集群管理中我们经常需要远程跳转到其他服务器ssh username remote host p port 这里我们编写一个简单的python脚本实现远程需求 config py usr bin env python coding utf
  • gitlab切换登录账号信息

    1 提交成员的修改 首先是登录账号 饶了三路十八弯 终于 是如此简单 痛苦 git remote set url origin https lt 账号 gt lt 密码 gt lt 链接 gt PS lt gt 这两符号不是 按照 lt g
  • 堆排序

    堆排序分为两步 建堆和调整堆 这两步可以由一个函数完成 但这个函数每次只能调整一条线 每层选择一次左右 使其符合堆的定义 因此建堆需要从最后一个非叶子节点自底向上调整堆 每次调整堆时需要对比两个孩子与父节点的大小 将最大的孩子与父节点交换
  • 在pycharm中安装Git插件(windows)

    1 去官网下载git Git 下载 git scm com 进入页面 直接点击windows 就直接下载了 下面是下载的git的exe 2 双击安装 2 1 路径选择 我选择了 D software Git 也可以默认安装 2 2 组件安装
  • [Linux 配置Mysql] 在Linux上面 安装mysql 5.7数据库

    安装完成以后 我的数据库地址为 var lib mysql mysql 安装mysql5 7 1 先把postfix 和mariadb libs卸载掉 不然的会有依赖包冲突 root wolfcode rpm e postfix maria
  • MFC框架机制详解

    MFC框架机制详解 1 1 Windows消息机制要点 1 1 1 窗口过程 每个窗口会有一个称为窗口过程的回调函数 WndProc 它带有四个参数 分别为 窗口句柄 Window Handle 消息ID Message ID 和两个消息参
  • VS2017登陆失败:我们无法刷新此账户的凭证、我们无法添加此账户发送请求时出错、评估期已结束,请登录以解除产品锁定

    一 问题 点击登录后会显示如下窗口 忘了截图 图片截于 35条消息 Visual Studio 2017无法登录问题解决 kellyjucy的博客 CSDN博客 vs2017无法登陆 二 解决方法 我试过以下博主的第一 二个方法 但是我还是
  • TCO(总所有成本)

    一 引言 总所有成本TCO Total cost of ownership 是一种公司经常采用的技术评价标准 它的核心思想是在一定时间范围内所拥有的包括置业成本 acquisition cost 和每年总成本在内的总体成本 在某些情况下 这
  • Not registered via @EnableConfigurationProperties, marked as Spring component.........

    Not registered via EnableConfigurationProperties marked as Spring component or scanned via ConfigurationPropertiesScan 错
  • 星星之火-28:什么是CDMA的远近效应与功率控制?

    1 什么是功率远近效应与功率控制 移动通信是在运动过程中进行的 移动台之间会出现近处移动台干扰远处移动台的现象 称为远近效应 对于频分多址与时分多址的系统 远近效应并不是那么明显 然而码分多址 同一小区内的所有的用户 他们的载频的频率是相同
  • 时间操作之lubridate包

    目录 加载lubridate lubridate包有5个字母 y m d h m s 用5个字母创建一个时间向量 筛选时间 加载lubridate 加载包 library lubridate lubridate包有5个字母 y m d h
  • 阿里云ecs共享型s6怎么样,带宽操作系统选择区别?

    不错的 基本是一个主流和入门级别的阿里云ecs服务器 满足我们的一般个人和初创企业的建站需求的 价格便宜 性价比高 独立服务器不是和别人共享的 独立公网IP 不影响SEO 共享型实例采用非绑定CPU调度模式 每个vCPU会被随机分配到任何空
  • 如何在MySQL存储过程中保留注释

    如何在MySQL存储过程中保留注释 本来在MySQL的Store Procedure 里添加注释很简单 可惜如果用命令行客户端来导入备份的数据 注释就会被干掉 在存储过程BODY里面添加注释 解决办法 99999 Write your co
  • leetcode第88题“非递减顺序排列“是什么意思?

    我在遇到这个词的时候 确实是影响到了我对题目意思的判断 后来查清楚了 分享 给大家这个小知识点 非递减顺序排列即是指 数列递减 但不是单调递减 中间可以有重复 比如 8 6 6 3 2 1 1 2 3 4 5 递增排列 9 8 7 6 5
  • 如何识别linux是多少位,如何查看linux版本 如何查看LINUX是多少位

    1 查看内核版本命令 1 root q1test01 cat proc version Linux version 2 6 9 22 ELsmp bhcompile crowe devel redhat com gcc version 3
  • js浏览器兼容性的写法

    大致有以下五大类 1 元素查找问题2 DOM操作3 事件4 语法5 XML 一 元素查找问题 1 document all name 1 现有问题 Firefox不支持document all name 2 解决方法 使用getElemen