黑马程序员技术交流社区

标题: 一道javascirpt 笔试题 [打印本页]

作者: 周星星 时间: 2012-6-19 09:13
标题: 一道javascirpt 笔试题
列出你所知的火狐和IE脚本兼容性问题？
我写的是：1:ajax 对象的获取不同
2:IE9以下版本不支持css3和html5,而火狐基本上支持
请各位同学帮忙

作者: 王章亚 时间: 2012-6-19 11:12
1、parentElement
问题：IE:支持parentElement，Firefox不支持parentElement而支持parentNode
解决：parent=obj.parentElement || obj.parentNode;

2、自定义属性：
问题：IE：可通过obj.defineAtt得到自定义属性，而Firefox不可以
解决：IE与FireFox通用：obj.getAttribute("defineAtt")；obj.setAttribute("defineAtt","值");

3、在含有frameSet页面取input值
问题：IE可取到该页面input的值，但Firefox无法取到，通过getElementById("input")会返回空
解决：在frame子页面取top中的input时，可换种方式。把input的值，变成frame的自定义属性，放到frame，然后通过以下方式获得（举例）：
   window.top.document.getElementById("leftFrame").getAttribute("hiddenUrl");

4、元素属性input.type
区别：IE下 input.type属性为只读，但是FireFox可以修改

5、 document.getElementsByName() 和 document.all[name] 的问题
问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

6、元素id与name：
现象：IE，在IE中元素只定义了name也可以通过document.getElementById("**")获得元素，而Firefox下不行
解决：每个元素均要写上id与name

7、JS修改过的表单元素无法提交到后台：
解决：<form>标签必须在<td>内或<table>外，不能在<table>与<tr>之间；并且所在的层次应该保持一致，即：在同一个table内或外，不能开始标签在此table内，结束在table外

8、show
解决：IE中可以用show作为方法名，但FireFox不允许，show为FireFox关键字

9、document.formName.item("itemName") 问题  []与()的问题
现象：IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
      Firefox下,只能使用document.formName.elements["elementName"].
   又如：tr.cells(0)，就要用tr.cells[1]
解决：统一使用document.formName.elements["elementName"].

10、eval("idName")问题
现象：IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象；
      Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决：统一用getElementById("idName")来取得id为idName的HTML对象.

11、变量名与某HTML对象ID相同的问题
现象：IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.
      Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决：使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

12、event.x与event.y问题
现象：IE下,even对象有x,y属性,但是没有pageX,pageY属性；Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

13、event.srcElement问题
现象：IE下,event对象有srcElement属性,但是没有target属性；Firefox下,event对象有target属性,但是没有srcElement属性.
解决：使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

14、frame问题，以下面的frame为例：<frame src="http://www.bokemx.com/xxx.html" id="frameId" name="frameName" />
（1）、访问frame对象:
   IE:使用window.frameId或者window.frameName来访问这个frame对象.
   Firefox:只能使用window.frameName来访问这个frame对象.
解决：使用window.frameName或window.document.getElementById("frameId")来访问这个frame对象

(2)切换frame内容:
   解决：在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
   如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";

15、body问题：
现象：Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body>
vscript type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>

16、事件委托方法
现象：IE：document.body.onload = inject; //Function inject()在这之前已被实现
         Firefox：document.body.onload = inject();
解决：window.onload=function(){函数名()};//把函数加入window.onload事件中

17、eval()与window.execScript()执行脚本
现象：IE、firerox均支持eval()，firefox不支持window.execScript()
解决：统一使用eval()；并且fireFox不支持vbscript

18、对事件处理函数的重写
解决：（例）:如对document的onclick()重写，统一使用document.onclick = function(){…}

19、document.all问题
现象：ie支持document.all 而firefox 不支持
解决：1）getElementsByTagName("tagName") 可以得到得到所有标签元素的集合；document.getElementsByTagName("*")等价于document.all
   2）getElementById("idName") 可以按id得到某一元素
   3）getElementsByName("Name") 可以得到按name属性得到某一元素

20、FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：obj.style.height = imgObj.height + 'px';

21、 ie,firefox以及其它浏览器对于table 标签的操作都各不相同
在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

22、tbody不能直接写在table的tr中，必须要放在一个td中，否则样式会出现问题

23、不同于IE，在Firefox下，不能使用如下形式的location.href
只能使用如下形式的window.location.href＝"http://shuai.be/"

Css问题：
0、css filter Alpha透明效果
CSS代码
filter: Alpha(opacity=0);
-moz-opacity:0;
opacity:0;
这三句,第一句是ie 支持.第二三句是firefox支持的,但是版本不一样就有两种了,所以用时候把三句都加上就行了

0.1、在FireFox中设置各种宽、高度均需指定单位，如：px

1、手型鼠标，标准的是：cursor:pointer;

2、padding 问题
举例：padding 5px 4px 3px 1px

作者: 朱志辉 时间: 2012-6-26 10:01
JavaScript的兼容性问题比较复杂，用jQuery吧。jQuery已经做好了封装了，兼容各种主流浏览器。传智播客有jQuery的视频资源在网上发布，推荐你看看。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2