(转)浏览器兼容的JS写法总结

-、元素查找问题
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方法了。

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ypacyhero/archive/2010/05/04/5556242.aspx

转载于:https://www.cnblogs.com/christal-11/p/5776647.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/458055.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java面试总结(第一天)

临近大学毕业&#xff0c;出来试试找工作&#xff0c;学c#出身&#xff0c;半路出家java&#xff0c;做过几个ssh、stringMVC的项目。基础知识不太扎实&#xff0c;勿喷 以下是我面试过程中遇到的问题 ----------------------------------------------------------------------…

怎么看cudnn的版本好_祖坟风水怎么看,好祖坟有什么征兆?

人们之所以看重祖坟的风水&#xff0c;是因为祖坟的风水与后代子孙的运势密切相关&#xff0c;可以说祖坟的风水好不好关系着子孙后代的运势顺不顺&#xff0c;因此对于祖坟的风水好坏人们是非常在意的&#xff0c;那么祖坟风水怎么看,好祖坟有什么征兆呢&#xff1f;下面是小编…

iOS - Swift SQLite 数据库存储

前言 采用 SQLite 数据库来存储数据。SQLite 作为一中小型数据库&#xff0c;应用 iOS 中&#xff0c;跟前三种保存方式相比&#xff0c;相对比较复杂一些。注意&#xff1a;写入数据库&#xff0c;字符串可以采用 char 方式&#xff0c;而从数据库中取出 char 类型&#xff0c…

Hibernate 多对多关联查询条件使用

from Brand as b inner join fetch b.styles as s where s.styleId? 转载于:https://www.cnblogs.com/cocoat/p/5427467.html

Spark 宽依赖和窄依赖

2019独角兽企业重金招聘Python工程师标准>>> 我们知道RDD就是一个不可变的带分区的记录集合&#xff0c;Spark提供了RDD上的两类操作&#xff0c;转换和动作。转换是用来定义一个新的RDD&#xff0c;包括map, flatMap, filter, union, sample, join, groupByKey, co…

smart gesture安装失败_WinCC flexible SMART V3 SP2安装步骤以及常见错误解决方法

1安装配置1. win7和win10系统都可以装2. 运行内存至少要2G。3. 硬盘储存空间至少要3G。2安装注意事项1.安装本软件之前必须要关闭所有杀毒软件(例如360安全卫士/360杀毒/电脑管家)等。2.其它西门子软件不要使用或者打开。3.安装之前确保硬盘空间充足。3下载地址https://bbs.jcp…

各类数据集整理(持续更新中ing)

转自&#xff1a;https://zhuanlan.zhihu.com/p/84088095 最近一次新增&#xff1a;2020.02.11 大家好&#xff0c;先给各位抱拳了&#xff01;我是和鲸&#xff08;科赛 http://kesci.com&#xff09;的运营一枚&#xff0c;今天给大家分享以下我们&#xff08;通过网线&…

Java Experiment 3 PairProgramming

http://www.cnblogs.com/20145106ssr/p/5428222.html 转载于:https://www.cnblogs.com/Christen/p/5428655.html

启动页面和各设备的宽高比及像素

2019独角兽企业重金招聘Python工程师标准>>> iOS7只能用LaunchImage来布置启动画面&#xff0c;只能用图片。iOS8以后支持LaunchScreen.xib来布置&#xff0c;可以自己添加控件。iOS8以及以后的用LaunchScreen来配置启动页。iOS8以后的会走这个设置&#xff0c;而io…

cc压力测试_中小型网站如何防范CC攻击?

大公司就不说了&#xff0c;付费CDN&#xff0c;防火墙&#xff0c;WAF&#xff0c;大流量&#xff0c;一般也会配置专门的安全问题响应团队。今天侧重讨论一下中小型网站如何&#xff08;优雅&#xff09;防范CC攻击。中小站点安全问题通病&#xff1a;对安全问题不重视&#…

ubuntu16.04 360随身WiFi2

查看kernel版本&#xff0c;插入360随身WiFi2&#xff0c;打开终端&#xff0c;执行下面命令即可。 ------------------------------------------------------------------------------------------------------------- From your kernel version, 4.2.0-16, it appears that…

泛型复习

回顾泛型类 泛型类&#xff1a;具有一个或多个泛型变量的类被称之为泛型类1、class A<T>{} 2、在创建泛型实例时&#xff0c;需要为其类型变量赋值A<String> anew A<String>(); *如果创建实例时&#xff0c;不给类型变量赋值&#xff0c;那么会有一个警告&am…

.net core EPPlus npoi_2020 ASP.NET界面开发:DevExpress v20.1支持.NET Core设计时

DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110种UI控件&#xff0c;DevExpress ASP.NET MVC Extensions是服务器端MVC扩展或客户端控件&#xff0c;由轻量级JavaScript小部件提供支持的70个高性能DevExpress ASP.NET Core Controls&#xff0c;包含功能…

ubuntu android studio SDK emulator directory is missing

ctrlH&#xff0c;搜索Android studio&#xff0c;把所有的都删除&#xff0c;再次安装即可下载

有关于我的一点想法

之前失眠写的&#xff0c;从空间搬运过来 之前一直想写一下有关自己想法。趁着失眠写一写。 不知道是不是幸运&#xff0c;我有幸认识了吴宝俊老师。他写博客&#xff0c;我经常去看他写的博客。后来在留言板发言几次也就熟了。虽然也仅限网友吧……但是我需要人给我指点迷津。…

mac电脑如何与手机同步复制粘贴_如何将电脑里的文件同步到手机里?

由于PDF的特殊性&#xff0c;一般很少有适用于手机编辑的软件&#xff0c;所以我们都习惯于使用电脑来修改PDF文档后&#xff0c;再发送到手机微信发送给其他人&#xff0c;那么如何快速将电脑里的PDF文件同步到手机里面呢&#xff1f;可能很多人会想到使用各种云盘&#xff0c…

走进缓存的世界(一) - 开篇

系列文章 走进缓存的世界&#xff08;一&#xff09; - 开篇走进缓存的世界&#xff08;二&#xff09; - 缓存设计走进缓存的世界&#xff08;三&#xff09; - Memcache概述 对于程序员来说多多少少都懂一点算法&#xff0c;算法是什么&#xff1f;算法是“时间”与“空间”的…

【解决问题】OpenCV(3.4.1) Error: Parsing error (xx.yaml(13): Incorrect indentation) in icvYMLParseValue

本博客运行环境为Ubuntu18.04 下 Kdevelop。 运行slam的一个cpp文件时&#xff0c;错误描述如下&#xff1a; OpenCV(3.4.1) Error: Parsing error (KITTI00-02.yaml(13): Incorrect indentation) in icvYMLParseValue, file /home/hadoop/opencv-3.4.1/modules/corec/persis…

dede后台栏目管理文章统计数量和实际文章数不一致解决办法

操作dede_arctiny表&#xff0c;将和栏目对应的typeid所有文章去掉即可。转载于:https://www.cnblogs.com/zgzy/p/5432724.html

an 转换器_400V耐压场效应管替代IRF730B型号参数,使用在DC-DC电源转换器。_场效应管吧...

DC-DC电源转化器的应用场景逐渐广泛&#xff0c;那么适用于DC-DC电源模块的场效应管需求也随之越来越高&#xff0c;这时候电源转化器厂的电子工程师就要留意了&#xff0c;国内是否有优质的场效应管能替代IRF730B型号呢&#xff0c;其实是有的&#xff0c;FHP840其实是可以跟I…