浏览器兼容的JS写法总结


Posted in Javascript onApril 27, 2016

一、元素查找问题
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="提交" onclick="javascript:gotoSubmit()"/>
      ...
      <script language="javascript">
        function gotoSubmit() {
          ...
          alert(window.event);  // use window.event
          ...
        }
      </script>

        新代码(可在IE和Firefox中运行):         

<input type="button" name="someButton" value="提交" onclick="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方法了。

以上就是针对浏览器兼容的JS写法的总结,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript按位非运算符的使用方法
Nov 14 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
vue组件实例解析
Jan 10 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
Vue.js基础知识汇总
Apr 27 #Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
常用原生JS兼容性写法汇总
Apr 27 #Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
主治医师岗位职责
2013/12/10 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
团日活动总结范文
2014/04/25 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2019广播稿怎么写
2019/04/17 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书