firefox 与 IE 兼容
2008-12-05 18:26
<body><SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n 网页可见区域宽："+ ;
s += "\r\n 网页可见区域高："+ ;
s += "\r\n 网页可见区域宽："+ +" (包括边线的宽)";
s += "\r\n 网页可见区域高："+ +" (包括边线的宽)";
s += "\r\n 网页正文全文宽："+ ;
s += "\r\n 网页正文全文高："+ ;
s += "\r\n 网页被卷去的高："+ ;
s += "\r\n 网页被卷去的左："+ ;
s += "\r\n 网页正文部分上："+ ;
s += "\r\n 网页正文部分左："+ ;
s += "\r\n 屏幕分辨率的高："+ ;
s += "\r\n 屏幕分辨率的宽："+ ;
s += "\r\n 屏幕可用工作区高度："+ ;
s += "\r\n 屏幕可用工作区宽度："+ ;
alert(s);
</SCRIPT>
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox
1. 问题
(1)现有问题：
现有代码中存在许多 ("itemName") 这样的语句，不能在 MF
下运行
(2)解决方法：
改用 ["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：("formName") 改为
["formName"]。
又如：("inputName")(1) 改为
("inputName")[1]
(3)其它
3.
(1)现有问题：
使用 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在 IE 中运行)：
<input type="button" name="someButton" value="提交" onclick=""/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(); // use
...
}
</script>
新代码(可在 IE 和 MF 中运行)：
<input type="button" name="someButton" value="提交" onclick=""/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : ( ? : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，
则仍然只能在 IE 中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF
中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用 idName 字符串取得对象的问题
(1)现有问题
在 IE 中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在 MF 中不
能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id
相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题 4
7. 与 问题
(1)现有问题
在 IE 中，event 对象有 x, y 属性，MF 中没有。
(2)解决方法
在 MF 中，与 等效的是 。但 IE 中没有。
故采用 代替 。在 IE 中也有这个变量。
与 有微妙的差别（当整个页面有滚动条的时候），不过大
多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = ? : ;
然后用 mX 代替
(3)其它
在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于 frame
(1)现有问题
在 IE 中 可以用 取得该 frame，mf 中不行
(2)解决方法
在 frame 的使用方面 mf 和 ie 的最主要的区别是：
如果在 frame 标签中书写了以下属性：
<frame src="" id="frameId" name="frameName" />
那么 ie 可以通过 id 或者 name 访问这个 frame 对应的 window 对象
而 mf 只可以通过 name 来访问这个 frame 对应的 window 对象
例如如果上述 frame 标签写在最上层的 window 里面的 htm 里面，那么可以这样访问
ie： 或者 来访问这个 window 对象
mf： 只能这样 来访问这个 window 对象
另外，在 mf 和 ie 中都可以使用 ("frameId")来访问
frame 标签
并且可以通过 ("testFrame").src = ''来切换 frame
的内容
也都可以通过 = ''来切换 frame 的内容
关于 frame 和 window 的描述可以参见 bbs 的‘window 与 frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 修改
9. 在 mf 中，自己定义的属性必须 getAttribute()取得
10.在 mf 中没有 parentElement 而用
parentNode
childNodes 的下标的含义在 IE 和 MF 中不同，MF 使用 DOM 规范，childNodes 中会插入
空白文本节点。
一般可以通过 ()来回避这个问题。
当 html 中节点缺失时，IE 和 MF 对 parentNode 的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
MF 中 的值为 form, 而 IE 中 的值为空节点
MF 中节点没有 removeNode 方法，必须使用如下方法 (node)
问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在 IE 中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF 的 body 在 body 标签没有被浏览器完全读入之前就存在，而 IE 则必须在 body 完全被
读入之后才存在
13. url encoding
在 js 中如果书写 url 就直接写&不要写&例如 var url =
'
= url 那么很有可能 url 不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在 tpl 中例外，因为 tpl 中符合 xml 规范，要求&书写为&
一般 MF 无法识别 js 中的&
14. nodeName 和 tagName 问题
(1)现有问题：
在 MF 中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName
的使用好象
有问题（具体情况没有测试，但我的 IE 已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE 下 属性为只读，但是 MF 下可以修改
16. () 和 [name] 的问题
(1)现有问题：
在 IE 中，getElementsByName()、[name] 均不能用来取得 div 元素（是否
还有其它不能取的元素还不知道）。
1, 替代 （ie 适用）
2,集合[]替代()（ie 适用）
3,target 替代 srcElement;parentNode 替代 parentElement（parentNode ie 适用）
4,(node)替代 removeNode(this)（ie 适用）
5,有空白文本节点
6,无 outerHTML 属性
7,事件局部变量 e 替代事件全局变量 event
8, 键值有别于 ,只有 3 个键值而无组合键值
9,无 ondrag 事件
10,DOMMouseScroll 替代 onmousewheel; 替代
11,addEventListener 替代 attachEvent;removeEventListener 替代 detachEvent
12,()替代 =false;()替代
=true
13,、 等严格检查"px"单位（加"px" ie 适用）
14,style="-moz-opacity:"替代 style="filter:alpha(opacity=90)";无其它 filter
15,="pointer"替代 ="hand"（ie 适用）
16,title 替代 alt（ie 适用）
17,状态栏默认不可修改,需调整 ff 设置
18,内置绘图功能以 canvas 或者 SVG 替代 vml
19,代码出错时经常不报错（想来也是 ff 的无奈之举吧,如果每个 ie 独有的表达方式换在它里
面都报错的话,怕是报都报不过来吧）
20,对缓存的清理非常不好
注:标明“ie 适用”者为通用性建议写法,未标明者在 ie 里不适用。
以下所有 IE 指
验证是否是 IE 浏览器(来之于 google js)
var agt=();
var is_ie=(("msie")!=-1 && );
正式开始
事件委托方法
IE
= inject; //Function inject()在这之前已被实现
firefox
= inject();
有人说标准是：
=new Function('inject()');
在 firefox 无法取得
通过其他方式传递对象
if(isIE)
("onmousedown",OnClickChangeTdBackColor);
//=OnClickChangeTdBackColor;
else//deal firefox
{
for(var i=0;i<;i++)
{
var rowObj = [i];
for( var j=0;j<;j++)
{
var cellObj = [j];
("onmousedown","OnClickChangeTdBackColor(this)");
}
//alert([0].tagName);
}
}
这是来之
在 FireFox 下编写事件处理函数是很麻烦的事.
因为 FireFox 并没有 . 如果要得到 event 对象,就必须要声明时间处理函数的
第一个参数为 event.
所以为了兼容 IE 与 FireFox,一般的事件处理方法为:
=handle_btn_click;
function handle_btn_click(evt)
{
if(evt==null)evt=;//IE
//处理事件.
}
对于简单的程序,这不算麻烦.
但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把 event 传进该参数,
那么所有的方法都要把 event 传来传去..这简直就是噩梦.
下面介绍一个解决这个麻烦事的方法,与原理.
JScript 中，函数的调用是有一个 这个属性的.
例如
function A()
{
B();
}
function B()
{
alert();
}
如果 B 被 A 调用,那么 就是 A
另外,函数有一个 arguments 属性. 这个属性可以遍历函数当前执行的参数:
function myalert()
{
var arr=[];
for(var i=0;i
arr[i]=[i];
alert(("-"));
}
alert("hello","world",1,2,3)
就能显示 hello-world-1-2-3
(arguments 的个数与调用方有关,而与函数的参数定义没有任何关系)
根据这两个属性,我们可以得到第一个函数的 event 对象:
=handle_click;
function handle_click()
{
showcontent();
}
function showcontent()
{
var evt=SearchEvent();
if(evt&&)//如果是基于事件的调用,并且 shift 被按下
(global_helpurl);
else
=global_helpurl;
}
function SearchEvent()
{
func=;
while(func!=null)
{
var arg0=[0];
if(arg0)
{
if(==Event) // 如果就是 event 对象
return arg0;
}
func=;
}
return null;
}
这个例子使用了 SearchEvent 来搜索 event 对象. 其中 'Event' 是 FireFox 的
.
在该例子运行时,
就是 showcontent,但是 [0]是空.所以 func=
时,func 变为 handle_click .
handle_click 被 FireFox 调用, 虽然没有定义参数,但是被调用时,第一个参数就是 event,所以
[0]就是 event !
针对上面的知识,我们可以结合 prototype.__defineGetter__ 来实现 在 FireFox
下的实现:
下面给出一个简单的代码.. 有兴趣的可以补充
if()
{
FixPrototypeForGecko();
}
function FixPrototypeForGecko()
{
.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle);
.__defineGetter__("event",window_prototype_get_event);
.__defineGetter__("srcElement",event_prototype_get_srcElement);
}
function element_prototype_get_runtimeStyle()
{
//return style instead...
return ;
}
function window_prototype_get_event()
{
return SearchEvent();
}
function event_prototype_get_srcElement()
{
return ;
}
function SearchEvent()
{
//IE
if()
return ;
func=;
while(func!=null)
{
var arg0=[0];
if(arg0)
{
if(==Event)
return arg0;
}
func=;
}
return null;
}
</body></html>
firefox 与 IE(parentElement)的父元素的区别
因为 firefox 与 IE 都支持 DOM,因此使用 是不错选择.
IE
firefox
中 UniqueID 和 clientID 的区别
要使用 方法，则使用控件的时候要这样来作
"javascript:OnSelectSubCatalog(\""++"\","+catalogIDX+","+
ing()+")";
调用 Select 元素的区别
移出一个选择项
--------------------------------------------------------------------------------
IE ：();
firefox ：
增加选择项：
--------------------------------------------------------------------------------
IE: (new Option(text,value));
firefox:
var opnObj = ("OPTION");
// = optionID;
= value;
= text;
(opnObj);
cursor:hand VS cursor:pointer
firefox 不支持 hand，但 ie 支持 pointer，所以建议统一使用 pointer。
