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

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

1)ChildNodes

问题:

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

解决:

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

实例:

<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>
<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>

2)Const问题

问题:

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

解决:

    使用Var,不使用const

实例:

<script type="text/javascript">
function OK(){
   function right()
   {
   var n="我是var定义的值";
   alert(n);
   }
</script>
<body>
<div style="cursor:pointer;" onClick="right();">点我啊!</div>
</body>

3)innerText问题

问题:

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

解决:

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

实例:

<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>
<body> 
<p id="d" onClick="show();">点我啊!</p> 
</body>

4)Input的type属性

问题:

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

解决:

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

实例:

<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>
<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>

5)window.event事件

问题:

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

解决:

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

实例:

<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>
<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>

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

问题:

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

解决:

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

实例:

<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>
<body> 
<input name="测试" value="测试" id="Test" onClick="IeTest();" type="button">
<input name="解决方案" value="解决方案" id="Solution" onClick="Solution();" type="button">
</body>

7)对象宽高赋值问题

问题:

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

解决:

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

实例:

<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> 
<body> 
<div id="hidden">这是要设置的高度!</div> 
  <div id="pinglun" >高度载入……</div> 
</body> 

8)集合类对象问题

问题:

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

解决:

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

        改为

        document.getElementsByName("idName")[0]

实例:

<script type="text/javascript">
function ok(){
 var s= document.getElementsByName("idName")[0].value;
 alert(s);
}
 window.onload=ok;
</script>
<body> 
<input name="idName" type="text" value="HEllO">
</body>

9)禁止选取网页内容

问题:  

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

解决:  

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

    FF:-moz-user-select:none;

实例:

<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>
<body> 
<div id="m_Div";">点一下IE的菜单或者按钮看看:)
又或者IE窗口外的地方</div>
</body>


总结:

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




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

上一篇:WEB 服務器不支持某種類型的文件下載


下一篇:初识ABP vNext(7):vue身份认证管理&租户管理