浏览器js的兼容问题小总结------彭记(024)

1.    HTML对象获取问题

FireFox:document.getElementById("idName");

ie:document.idname或者document.getElementById("idName").

解决办法:统一使用document.getElementById("idName");

2.    const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量.

解决方法:统一使用var关键字来定义常量.

3. event.x与event.y问题

说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;

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

解决方法:使用mX(mX  
=   event.x   ?   event.x  
:   event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4. window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location.

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

5. frame问题

以下面的frame为例:

<frame   src="xxx.html"   id="frameId"  
name="frameName"   />

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象.  
frameId和frameName可以同名。

Firefox:只能使用window.frameName来访问这个frame对象.

另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:

在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src  
=   "xxx.html"或window.frameName.location   =  
"xxx.html"来切换frame的内容.

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent  
frame),可以在frame中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

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

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.

例如:var  
parWin   =   window.opener;  
parWin.document.getElementById("Aqing").value  
=   "Aqing";

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

IE:obj.parentElement

firefox:obj.parentNode

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

8. document.formName.item(”itemName”) 问题

问题说明:IE下,可以使用document.formName.item(”itemName”)
或document.formName.elements
["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。

解决方法:统一使用document.formName.elements["elementName"]。

9. 集合类对象问题

问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。

解决方法:统一使用 [] 获取集合类对象。

10.          
自定义属性问题

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute() 获取自定义属性。

解决方法:统一通过getAttribute() 获取自定义属性。

11.          
input.type属性问题

问题说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写。

解决办法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

12.          
event.srcElement问题

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

解决方法:使用srcObj =
event.srcElement ?event.srcElement : event.target;

如果考虑第8条问题,就改用myEvent代替event即可。

13.          
body载入问题

问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。

[注] 这个问题尚未实际验证,待验证后再来修改。

[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

14.          
事件委托方法

问题说明:IE下,使用document.body.onload
= inject; 其中function
inject()在这之前已被实现;在Firefox下,使用document.body.onload
= inject();

解决方法:统一使用document.body.onload=new
Function(’inject()’); 或者document.body.onload = function(){/* 这里是代码 */}

[注意] Function和function的区别。

15.          
Table操作问题

问题说明:ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。

解决方法://向table追加一个空行:

var row = otable.insertRow(-1);var cell =
document.createElement("td");cell.innerHTML =
"";cell.className = "XXXX";row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。

16.          
对象宽高赋值问题

问题说明:FireFox中类似obj.style.height =
imgObj.height的语句无效。

时间: 2024-10-09 07:23:22

浏览器js的兼容问题小总结------彭记(024)的相关文章

浏览器css的兼容问题小总结------彭记(025)

1.         cursor:hand   VS   cursor:pointer firefox不支持hand,但ie支持pointer 解决方法:   统一使用pointer 2. innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent. 解决方法: if(navigator.appName.indexOf("Explorer")   >   -1){ document.getElementById('element').inne

关于js的兼容问题(小办法)!

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可

17年项目工作知识点小总结------彭记(022)

时间永远是过的最快的,对于现在的我来说,忙碌的工作中不断的学习,不断的成长,已经正能量满满.17年已过大半,对 这段时间的工作和项目知识点做一个小结,重新整理一下小知识点.总结分一下几大块: HTML5: 1.新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维.图形及特效特性,性能与集成特性a.语义化更好的内容标签(header,nav,footer,aside,article,section)b.表单控件,calendar.date.time.email.url.se

js 判断浏览器关闭事件 兼容所有浏览器

无论是从页签处关闭浏览器,还是关闭整个浏览器窗口,无论是 ie11,火狐,谷歌,苹果,还是ie6,都能兼容的浏览器关闭事件监听 在网上搜索了一天,虽然网上也有之类的代码,但是太繁琐,有时候还不可用.我也是在原有基础上修改的.经过了上述的浏览器测试,如果有不兼容的,欢迎提出意见一起学习. ? <script type="text/jscript" src="jquery-1.10.2.min.js"></script> <script t

顶 兼容各种浏览器js折叠菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

我在 impress.js 中学到的小套路

我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下,遇到了 impress.js ,代码量只有 jQ 的十分之一,看起来挺好下手,研究了两天,勉强弄懂了其中的原理.于是写下此文,记录我在 impress.js 中学到的小套路. 附上impress.js github链接. impress.js 简介 套路开始 如何使用 JS 为某个元素添加多个样式?

atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9

atitit..主流 浏览器 js 引擎  内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包括: 2 2.1. 主要组件体系结构 2 2.2. WebCore排版引擎及JavaScriptCore解析引擎, 3 2.3. 渲染引擎基本流程 3 3. 当前主流浏览器的引擎及浏览器: 4 3.1. Trident(MSHTML):IE 4 3.2. Presto:Opera7及以上 4 3.3. Gecko:Firefox 4 3.4. KHTML(衍生出W

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

各个浏览器之间的兼容问题

各个浏览器之间的兼容性问题,同样的HTML5和CSS5样式,但是浏览器表现的效果不一样.一,什么兼容性问题,不正常的原因是什么?,应该怎么样让浏览器显示正常.二,为什么浏览器会存在兼容性的问题?1,同一个浏览器,版本越老存在的bug越多,越新的版本,对新标签和新的属性,新的特性支持越少.2,不同的浏览器,核心技术不一样,标准不同,实现的方式也有差异,最终的效果也有差异.三,处理兼容性问题的思路one,要不要做?1,从产品的角度,(产品的受欢迎程度,受欢迎浏览器的比例,效果优先还是基本功能优先?)