zoukankan      html  css  js  c++  java
  • js在IE和Firefox兼容性 dodo

    1. document.form.item 问题

      问题:

        现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox下运行

         解决方法:

           统一使用 document.formName.elements["elementName"]

    2. 集合类对象问题

        问题:

          IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象      

        解决方法:

          改用[ ]作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]

         又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

    3. event

        获取event问题:

         window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。

        解决方法:

        在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。

        Firefox中获取event的方法:

        (1) 从HTML页面传递参数event     

        (2) event = arguments.callee.caller.arguments[0];

           function getEvent(evt) { evt=evt?evt:(window.event?window.event:null); }

        event属性问题:

        IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

        Firefox中的event.pageX相当于IE中的event.x

        解决方法:event.x = event.x ? event.x : event.pageX;

        其它:

        event.layerX 在IE与火狐中都有,具体意义有无差别尚未试验。


    4. HTML 对象的 id 作为对象名的问题

      问题:

      在IE中,HTML对象的ID可以作为document的下属对象变量名直接使用,而在Firefox中不能。

      解决方法:

      统一用 getElementById("idName") 代替 idName 作为对象变量使用。

    5. 用idName字符串取得对象的问题

      问题:

      在IE中,利用eval(idName)可以取得id为idName的HTML对象,而在Firefox中不能。

      解决方法:

      统一使用 getElementById(idName) 代替 eval(idName)

    6. 变量名与某 HTML 对象 id 相同的问题

      问题:

      IE中HTML对象的ID可以作为document的下属对象变量名直接使用;而Firefox则不能。在Firefox中,使用与HTML对象ID相同的变量名;IE下则不能。

      解决方法:

      统一使用使用document.getElementById("idName")代替document.idName

      在声明变量时,一律加上 var ,以避免歧义。

      此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。

    7. frame问题

      问题:

      在 IE中 可以用window.testFrame取得该frame,而Firefox中不行

      解决方法:

      在frame的使用方面火狐和ie的最主要的区别是:

      <frame src="xx.htm" id="frameId" name="frameName" />

      IE可以通过id或者name访问这个frame对应的window对象

      而Firefox只可以通过name来访问这个frame对应的window对象

      如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问

      IE:window.top.frameId或者window.top.frameName来访问这个window对象

      Firefox:只能这样window.top.frameName来访问这个window对象

      另外,在火狐和IE中都可以使用window.top.document.getElementById("frameId")来访问frame标签

      并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容

      也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

    9. 在Firefox中,自己定义的属性必须getAttribute()取得

      if(document.all){   //IE下为dlg对象添加事件
              dlg.setAttribute("onmousedown", function(){ move_Div(this); });
          }else{    //Firefox下为dlg对象添加事件
              dlg.setAttribute("onmousedown", "move_Div(this);");
         }

    10.在Firefox中没有 parentElement children 而用 parentNode childNodes

      childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点 ---- firefox下childNodes会把换行和空白字符都算作父节点的子节点,

      而ie的childNodes和children不会。

      一般可以通过node.getElementsByTagName()来回避这个问题。

      当html中节点缺失时,IE和Firefox对parentNode的解释不同,例如

      <form>

           <table>

               <input/>

           </table>

      </form>

      Firefox中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

      Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)

    11.const 问题

      问题:

      在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

      方法:

      不使用 const ,以 var 代替。

    12. body 对象

      Firefox的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在

    13. url encoding

      在JS中如果书写url就直接写&不要用&amp;    

      如果 var url = 'xx.jsp?objectName=xx&amp;objectEvent=xxx';

      那么frm.action = url时,url很有可能不会被正常显示以至于参数没有正确的传到服务器,一般会服务器报错参数没有找到。

      当然在tpl中例外,因为tpl中符合xml规范,要求&书写为&amp;

      一般Firefox无法识别JS中的&amp;

    14. nodeName 和 tagName 问题

      问题:

        在Firefox中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象有问题。

      解决方法:

        使用 tagName,但应检测其是否为空。

    15. input.type属性问题

      IE下 input.type属性为只读,但是Firefox下可以修改

    16. document.getElementsByName() 和 document.all[name] 的问题

      问题:

        在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。

    17.event.srcElement问题

          问题:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
         

      解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target

    18.模态和非模态窗口问题

          问题:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。


      解决方法:

        直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。      

        例如:var parentWin = window.opener;

        parentWin.document.getElementById("Aqing").value = "Aqing";

    19. 事件委托方法

         IE:document.body.onload = inject; //Function inject()在这之前已被实现
         Firefox:document.body.onload = inject();
         有人说标准是:document.body.onload=new Function('inject()');

    20. firefox与IE(parentElement)的父元素的区别

         IE:obj.parentElement
         firefox:obj.parentNode
          解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择。

         21.cursor:hand VS cursor:pointer

         Firefox不支持hand,但IE支持pointer
         解决方法: 统一使用pointer


    22.innerText在IE中能正常工作,但是innerText在FireFox中却不行.

          解决方法:
          if(navigator.appName.indexOf("Explorer") > -1){

          document.getElementById('element').innerText = "my text";

           } else{

          document.getElementById('element').textContent = "my text";

          }

    23. FireFox中类似 obj.style.height = imgObj.height 的语句无效

          解决方法:obj.style.height = imgObj.height + 'px';

    24. IE,Firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。

          解决方法: //向table追加一个空行
          var row = otable.insertRow(-1);
           var cell = document.createElement("td");
          cell.innerHTML = " ";
          cell.className = "XXXX";
           row.appendChild(cell);

    25. padding 问题

      FireFox无法解释padding 5px 4px 3px 1px 简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;


    26. 消除ul、ol等列表的缩进时

          样式应写成:list-style:none;margin:0px;padding:0px;
          其中margin属性对IE有效,padding属性对FireFox有效

    27. CSS透明

          IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
          FireFox:opacity:0.6

    28. CSS圆角

          IE:不支持圆角。
          FireFox: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;

             -moz-border-radius- bottomright:4px;

    29. CSS双线凹凸边框

          IE:border:2px outset;
          FireFox:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;

            -moz-border-bottom-colors:#404040 #808080;

    30.window.location.href问题

          问题:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
        

      解决方法:使用window.location来代替window.location.href

    31.模态窗口关闭

      问题:FireFox不支持window.close().

      解决办法:使用window.top.close()

  • 相关阅读:
    14_java之变量|参数|返回值|修饰符
    NYOJ 202 红黑树 (二叉树)
    NYOJ 138 找球号(二) (哈希)
    NYOJ 136 等式 (哈希)
    NYOJ 133 子序列 (离散化)
    NYOJ 129 树的判定 (并查集)
    NYOJ 117 求逆序数 (树状数组)
    NYOJ 93 汉诺塔 (数学)
    HDU 2050 折线分割平面 (数学)
    天梯赛L2-008 最长对称子串 (字符串处理)
  • 原文地址:https://www.cnblogs.com/zgqys1980/p/2958963.html
Copyright © 2011-2022 走看看