浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试

在浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中，已经对关于CSS的一些兼容性问题进行了总结，后来自己又整理了一些关于JS的兼容性问题，现在分享给大家。

1）ChildNodes

问题：

IE7、IE8正常，IE9、IE10、chrome、FF的 childNodes 中会插入空白文本节点

解决：

可以通过document.getElementsByName 来回避这个问题

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script type="text/javascript" >  
    function IETest(){  
        var testdiv=document.getElementById("div1");  
        var ieLength=testdiv.childNodes.length;  
        alert(ieLength);  
        }  
    function FFTest(){  
        var testdiv=document.getElementById("div1");  
        var ffLength=testdiv.childNodes.length;  
        alert(ffLength);  
        }  
    function Solution(){  
        var solution =new Array();  
        var solution=document.getElementsByName("test");  
        alert(solution.length);  
        }  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><body>  
     <div id="div1">  
    <a name="test"></a>  
        <a name="test"></a>  
        <a name="test"></a>  
    </div>  
    <input type="button"  value="FFTest" onclick="FFTest()"/>  
    <input type="button" value="IETest" onclick="IETest()"/>  
    <input type="button" value="Solution" onclick="Solution()" />  
</body></span>  

2）Const问题

问题：

在IE中不能识别const，而FF和chrome的可以

解决：

使用Var，不使用const

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script type="text/javascript">  
function OK(){  
   function right()  
   {  
   var n="我是var定义的值";  
   alert(n);  
   }  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>  
<div style="cursor:pointer;" onClick="right();">点我啊！</div>  
</body></span>

3）innerText问题

问题：

innerText 在IE和谷歌中能正常工作，但是 innerText 在FireFox中却不行
textContent在IE9、IE10、谷歌、FF中能正常工作，但是IE7、IE8中不能使用

解决：

不同的浏览器采用不同方式。

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script type="text/javascript">  
function isIE()  
{  
   var i=navigator.userAgent.toLowerCase().indexOf("msie");  
   if(i>0)  { return true;}  
   else    { return false;}  
}  
function isFireFox(){  
    var j=navigator.userAgent.toLowerCase().indexOf("firefox");  
    if(j>0)  { return true;}  
    else    { return false;}  
}  
 function show(){  
  var obj = document.getElementById("d");  
  //d.innerText="show text";//火狐不识别  
    if(isIE()){  
    d.innerText="show 新年快快乐乐！";  
    }  
    else if(isFireFox()){  
  d.textContent="新年快乐！";//IE7，8不识别其他都行   
  }  
else   
{  
d.textContent="新年快乐！";  
}  
 }  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>   
<p id="d" onClick="show();">点我啊！</p>   
</body></span>

4）Input的type属性

问题：

在IE10、chrome和FF中type属性可以修改，但是在IE7、IE8、IE9中不能修改，因为在这里input属性type是只读的。

解决：

利用jquery和隐藏控件，实现对type属性的修改

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        function showPwd(chk) {  
            var $2 = $("#tbPwd,#tbPwd_Text");  
            var currVal = $2.filter(":visible").val();  
            $2.toggle().val(currVal);  
        }  
    </script></span>  

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><body>  
    明文显示：<input type="checkbox" id="CBShowPwd" onchange="showPwd(this)" /><br />  
    密码：<input type="password" id="tbPwd"  />  
    <input type="text" id="tbPwd_Text" style="display:none;background-color:coral;" />  
</body></span>  

5）window.event事件

问题：

在FF中无法使用，IE系列和Chrome正常

解决：

可以通过给函数的参数传递event对象，然后获取后进行处理

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><style type="text/css">  
 #obj{background:red;width:300px;height:200px;position:relative;}     
 </style>  
<script type="text/javascript">  
function show(eent) {  
  var event = eent || window.event;  
    var x = event.x || event.pageX;  
    var y = event.y || event.pageY;  
  alert("x坐标为"+x+"，y坐标为"+y);  
  }  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><body>   
<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">  
<tr><td>  
<div onClick="show(event)" style="background:silver;cursor:pointer">  
Click here to show.   
</div>  
</td></tr>  
</table>  
</body></span>  

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

问题：

在FF、Chrome和IE9、IE10中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，但是在IE7、IE8中不能

解决：

在声明变量时，一律加上 var ，以避免歧义，这样在IE7、IE8中亦可正常运行，最好不要取与HTML对象 id 有相同的变量名，以减少错误。

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><style type="text/css">  
 #obj{background:red;width:300px;height:200px;position:relative;}     
 </style>  
<script type="text/javascript">  
function IeTest() {  
  Test="124";  //IE78不能使用  
 alert(Test);  
}  
function Solution() {  
  var IETest="124";  
 alert(IETest);  
}  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>   
<input name="测试" value="测试" id="Test" onClick="IeTest();" type="button">  
<input name="解决方案" value="解决方案" id="Solution" onClick="Solution();" type="button">  
</body></span>

7）对象宽高赋值问题

问题：

FF、IE、chrome中类似 obj.style.height = imgObj.height 的语句无效

解决：

统一使用：obj.style.height = imgObj. offsetHeight+ "px"

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script type="text/javascript">   
         function $(id){    
           return document.getElementById(id);   
        }    
        function getHeight() {    
          alert($("hidden").offsetHeight+ "px" );    
          $("pinglun").style.height=$("hidden").offsetHeight+ "px";              
        }    
      window.onload = function() {    
          getHeight();    
         }    
   </script>   
 <style type="text/css">   
   #hidden { width:100px; background:#99CC00; height:400px; float:left}    
   #pinglun { width:500px; height:auto; background:#FFCCCC; float:left; margin-left:5px;}    
</style> </span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>   
<div id="hidden">这是要设置的高度！</div>   
  <div id="pinglun" >高度载入……</div>   
</body> </span>

8）集合类对象问题

问题：

代码中许多集合类对象取用时使用()，IE能接受，FF和chrome不能接受

解决：

改用 [] 作为下标运算，例：
document.getElementsByName("idName")(0)

改为

document.getElementsByName("idName")[0]

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><script type="text/javascript">  
function ok(){  
 var s= document.getElementsByName("idName")[0].value;  
 alert(s);  
}  
 window.onload=ok;  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>   
<input name="idName" type="text" value="HEllO">  
</body></span>

9）禁止选取网页内容

问题：

禁止选取网页内容，FF需要用CSS禁止，而IE系列和谷歌用JS禁止

解决:

IE: document.onselectstart=function() {return false;}

FF:-moz-user-select:none;

实例：

 
   [html]  
   view plain 
   copy 
    
    
    
  
<span style="font-size:18px;"><style type=text/css>  
#m_Div{  
width:200px;  
height:200px;  
border:1px solid #999;  
padding:2px;  
-moz-user-select:none;  
}  
</style>  
<script type="text/javascript">  
document.onselectstart=function() {return false;}  
</script></span>  

 
   [html]  
   view plain 
   copy 
    
<span style="font-size:18px;"><body>   
<div id="m_Div";">点一下IE的菜单或者按钮看看:)  
又或者IE窗口外的地方</div>  
</body></span>

总结：

BS的项目开发，难免会用到JS，而每个浏览器对JS的支持不同。这就需要我们去兼容他们，不然有些浏览器就无法运行我们的代码，实现相应的功能。对此，我们要注意各个浏览器之间的差异，相同的JS，在项目中解析不同，识别这些不同，进而避免，找到解决方法，这是我们需要做的事情。

秒客网

浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试

相关文章