浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试
2015-03-16 18:05
465 查看
在浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中，已经对关于CSS的一些兼容性问题进行了总结，后来自己又整理了一些关于JS的兼容性问题，现在分享给大家。
1）ChildNodes
问题：
IE7、IE8正常，IE9、IE10、chrome、FF的 childNodes 中会插入空白文本节点
解决：
可以通过document.getElementsByName 来回避这个问题
实例：
[html] view
plaincopy
<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
plaincopy
<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
plaincopy
<span style="font-size:18px;"><script type="text/javascript">
function OK(){
function right()
{
var n="我是var定义的值";
alert(n);
}
</script></span>
[html] view
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<span style="font-size:18px;"><body>
<div id="m_Div";">点一下IE的菜单或者按钮看看:)
又或者IE窗口外的地方</div>
</body></span>
总结：
BS的项目开发，难免会用到JS，而每个浏览器对JS的支持不同。这就需要我们去兼容他们，不然有些浏览器就无法运行我们的代码，实现相应的功能。对此，我们要注意各个浏览器之间的差异，相同的JS，在项目中解析不同，识别这些不同，进而避免，找到解决方法，这是我们需要做的事情。
1）ChildNodes
问题：
IE7、IE8正常，IE9、IE10、chrome、FF的 childNodes 中会插入空白文本节点
解决：
可以通过document.getElementsByName 来回避这个问题
实例：
[html] view
plaincopy
<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
plaincopy
<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
plaincopy
<span style="font-size:18px;"><script type="text/javascript">
function OK(){
function right()
{
var n="我是var定义的值";
alert(n);
}
</script></span>
[html] view
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<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
plaincopy
<span style="font-size:18px;"><body>
<div id="m_Div";">点一下IE的菜单或者按钮看看:)
又或者IE窗口外的地方</div>
</body></span>
总结：
BS的项目开发，难免会用到JS，而每个浏览器对JS的支持不同。这就需要我们去兼容他们，不然有些浏览器就无法运行我们的代码，实现相应的功能。对此，我们要注意各个浏览器之间的差异，相同的JS，在项目中解析不同，识别这些不同，进而避免，找到解决方法，这是我们需要做的事情。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试
- 浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试
- 浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试
- CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器
- 关闭浏览器输入框自动补齐,兼容IE,FF,Chrome等
- Select 可编辑 - 完美支持各大主流浏览器 最近做项目有个select可编辑的需求,一时棘手,网上找了很多解决方案都不完美,没办法自己写了一个,经测试IE,FF,chrome都支持。特此拿出来
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- Jquery判断离开页面时，通过Ajax更新数据（兼容IE,Chrome，FF浏览器）
- CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
- 解决不同浏览器上中文文件名的下载乱码问题php验证可行的测试过ie ff 和chrome的
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
- css3书签风格按钮列表（兼容ie，ff，chrome，safari和opera） 分类： css3 浏览器兼容 button 按钮 2014-02-12 10:30 338人阅读 评论(0) 收藏
- CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载