浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试
2016-03-14 09:24
661 查看
在浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中,已经对关于CSS的一些兼容性问题进行了总结,后来自己又整理了一些关于JS的兼容性问题,现在分享给大家。
1)ChildNodes
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
2)Const问题
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
3)innerText问题
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
4)Input的type属性
问题:
解决:
利用jquery和隐藏控件,实现对type属性的修改
实例:
[html] view plain copy
[html] view plain copy
5)window.event事件
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
6)变量名与某HTML对象 id 相同的问题
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
7)对象宽高赋值问题
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
8)集合类对象问题
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
9)禁止选取网页内容
问题:
解决:
实例:
[html] view plain copy
[html] view plain copy
总结:
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,在项目中解析不同,识别这些不同,进而避免,找到解决方法,这是我们需要做的事情。
相关文章推荐
- js template 和 Mustache。Mustache额使用
- 快乐的JS正则表达式(二)
- AJAX实现跨域的三种方法(代理,JSONP,XHR2)
- 利用d3.js绘制雷达图
- js中(function(){…})()立即执行函数写法理解
- [RxJS] Wrap up
- [RxJS] Sharing Streams with Share
- JS表格元素排序
- 《JavaScript语言精粹》笔记
- Javascript猜数字游戏
- JSP自定义标签简单入门教程
- javascript实现PC网页里的拖拽效果
- javascript实现数组去重的多种方法
- 使用javascript插入样式
- 基于javascript html5实现3D翻书特效
- 原生javascript+css3编写的3D魔方动画旋扭特效
- javascript复制数组
- 说说JSON和JSONP,也许你会豁然开朗
- 深入理解JavaScript系列
- JavaScript 小技巧