使用JS在Firefox与IE中要注意的地方

原创 2007年09月13日 15:07:00

1、取iFrame对象,用window["frameName"],其中frameName为要取的iFrame的name属性而不是id属性。

2、取对象,最好用document.getElementById("ID")取,这种取法在2种浏览器里都能正常取到。

3、Date对象的geYear()方法在两种浏览器取到的值不一样,

例如:2007年,在IE里取得的是2007,而在Firefox里取到的是107,如果要取年份,要用getFullYear()方法取。

4、使用style.display属性在两种浏览器里效果不一样,

例如一个iFrame,设document.getElementById("frameName").style.display="none";时,

在IE里,被隐藏的iFrame会一直存在(即在内存中没有释放),而在Firefox里则是释放掉了,

当设document.getElementById("frameName").style.display="";时,IE不用重新加载,而Firefox则需要重新加载iFrame,即iFrame里的内容是重新请求获得的。

5、异步请求不

var http_request = false;
var requestMsg = "";
function send_request(url,arg) 
...{
http_request 
= false;
if(window.XMLHttpRequest)//firefox
...
    http_request 
= new XMLHttpRequest();
    
if (http_request.overrideMimeType) 
    
...{
        http_request.overrideMimeType(
'text/xml');
    }

}

else if(window.ActiveXObject)//ie
...{
    
try 
    
...{
        http_request 
= new ActiveXObject("Msxml2.XMLHTTP");
    }
 
    
catch (e) 
                     
...{
        
try 
        
...{
            http_request 
= new ActiveXObject("Microsoft.XMLHTTP");
        }
 
        
catch (e) 
        
...{
            alert(
"error!");
        }

    }

}


if (!http_request) 
...{
    alert(
"失败,请检查浏览器版本");
    
return false;
}

if(window.XMLHttpRequest) 
...{
    http_request.onload 
= processRequestForFirefox;//Firefox没有onreadystatechange 事件和readyState属性
}

else if(window.ActiveXObject)
...{
    http_request.onreadystatechange 
= processRequest;
}


http_request.open(
"POST", url, false);
http_request.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded");
http_request.send(arg);
}

//处理返回信息
//
firefox
function processRequestForFirefox()
...{
    
if(http_request.status == 200)
    
...{
        requestMsg 
= http_request.responseText;//取服务端的返回信息
    }

    
else
    
...{
        alert(
"error");
    }

}

//IE
function processRequest() 
...{
    
if(http_request.readyState == 4)
    
...{
        
if(http_request.status == 200)
        
...{
            requestMsg 
= http_request.responseText;
        }
 
        
else
        
...{
            alert(
"error");
        }

    }

}

6、加载XML不一样

function FormRemove()
...{
    send_request(
"../url","xml="+xml);
    
//alert(requestMsg);
    var xmlDoc = null;
    
var loadResult = false;
    
if(window.XMLHttpRequest) //firefox
    ...{
        
var oParser = new DOMParser();
        xmlDoc 
= oParser.parseFromString(requestMsg,"text/xml");
        xmlDoc.async 
= "false";//false表示同步加载
                                           //firefox中如果发现载入的XML不是有效的XML格式,则会载入一个以<parsererror>为根接点的文档
        if(xmlDoc.documentElement.tagName != "parsererror")
        
...{
            loadResult 
= true;
        }

    }

    
else if(window.ActiveXObject)//ie
    ...{
        xmlDoc 
= new ActiveXObject("MSXML2.DOMDocument");
        xmlDoc.async 
= "false";
        loadResult 
= xmlDoc.loadXML(requestMsg);
    }

    
if(loadResult == true)
    
...{
        
var nodeResult = xmlDoc.documentElement.firstChild;
        
if(nodeResult != null)
        
...{
            
var result = nodeResult.getAttribute("Status");
            
if(result != null && parseInt(result) == 0)
            
...{
                
//operator success
            }

            
else
            
...{
                
//operator failure
            }

        }

        
else
        
...{
            alert(
"无效的返回值");
        }

    }

    
else
    
...{
        alert(
"加载返回结果失败");
    }

}

------------------------------------------------------------------------------------------------------------------------

转自其他人总结的不同点:

1、创建一个Element,通用的写法为createElement("div")
   IE中也可以这样写createElement("<div style='color:#FFFFFF'>"),但Firefox不认
2、IE中的width、height与Firefox中概念不同,IE中width=FireFox中的width+2*borderWidth+2*Padding
   参见:http://help.powereasy.net/Template/WEB/1557.html
3、动态添加css代码
   IE:

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText 
= cssStr;

 

FireFox:

 

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style"); 
style.type 
= "text/css"
style.innerHTML 
= cssStr; 
win.document.getElementsByTagName(
"HEAD").item(0).appendChild(style); 

4、table在后面添加加行或列,通用写法insertRow(-1),insertCell(-1)
   IE中insertRow(),insertCell()这样写也可以,Firefox不认
5、警告对话框alert(),IE中书写时无参数则默认参数为空字符串,Firefox中则必须输入参数,传空参数则要写成alert("");
6、给element.style.width赋值必须写成24px,只写数字24的话,FireFox会不认,IE里都可以
7、在使用Element,并给其绑定了onclick、onmouseover、onmousedown、onmouseout等事件
    element.onclick = function() { alert("hello kitty"); };
   时,需注意
   将此元素添加到上级元素上时要用appendChild,不可以在上级中使用innerHTML操作,这样会使事件无效
8、获得事件和事件源
   IE:事件:window.event
      事件源:window.event.srcElement
   FireFox:事件:arguments.callee.caller.arguments[0]
              事件源:arguments.callee.caller.arguments[0].target
9、在选中区域粘贴HTML
   IE:

var r = window.document.selection.createRange();
range.pasteHTML(
"HTML代码");

FireFox:

var r = window.getSelection().getRangeAt(0);
var oFragment = r.createContextualFragment(“HTML代码”); 
r.deleteContents();
r.insertNode(oFragment); 
===============================================================
1. document.all
 Firefox可以兼容document.all, 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替
 不过对于document.all.length等属性,则完全不兼容。
2. parentElement
 这个也不兼容。比方说, obj.parentElement.name 则应改成 obj.parentNode.attributes.getNamedItem("name").nodeValue (不知道如何写得更简洁些)
3. event
 W3C不支持windows.event
 比方说:
    在IE里面
          <div class="menu" id="menu" onclick="onMenuClick(); ">.....</div>
      function onMenuClick()
      {
        collapseMenu(event.srcElement);
      }
    工作正常。不过在Firefox中,则改成:
 
        <div class="menu" id="menu" onclick="onMenuClick(event); ">
        function onMenuClick(evt)
      {
        if(evt == null)
              evt = window.event; // For IE
          var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target
        collapseMenu(srcElement);
}
 
1:innerText
IE支持,FIREFOX不支持
解决办法:用innerHTML,2种浏览器都识别innerHTML

2:document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持,IE不支持
解决办法:把行插入到TBODY中,不要直接插入到表

3:setAttribute('style','color:red;')
FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
解决办法:不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上,万无一失 ^_^
4:class
setAttribute('class','styleClass')
FIREFOX支持,IE不支持(指定属性名为CLASS,IE不会设置元素的CLASS属性,相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上

5:用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持,IE不支持
解决办法:
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

6:建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:
var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>";
解决办法:
这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了
万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。

0:共同的一些技巧
在动态建立INPUT型输入元素时,一般是先加入,在设置TYPE。这就有可能出错

好习惯:var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);

使用access数据库要注意的地方

  • 2009年02月24日 00:29
  • 206B
  • 下载

oracle游标的使用要注意的地方

对于数据库来说,SQL语句可能忘不了,但游标这
  • veid_f3
  • veid_f3
  • 2014年10月12日 22:51
  • 778

使用NSNotificationCenter时要注意的地方

An NSNotificationCenter object (or simply, notification center) provides a mechanism for broadcastin...
  • Koupoo
  • Koupoo
  • 2011年04月30日 15:09
  • 1205

STM32f10x升级固件库3.1.2使用要注意的地方

很多使用3.1.0以及以下版本固件库运行很好的程序,升级成3.1.2固件库以后编译出错,提示外围固件库的某某函数没有声明,如果你也碰到这个问题正在燋头烂额,请看看你的项目设置中是不是没有添加“USE_...
  • wfdtxz
  • wfdtxz
  • 2012年05月01日 15:36
  • 1906

开发人员如何使用testFlight给测试人员推送ios测试包(含使用testFlight要注意的地方)(20170413备注:苹果已改版,此方法不再适用)

必备知识: 1.testFlight分为内部测试和外部测试,内部测试不需要苹果审核,外部测试需要苹果审核1–3天 2.testFlight内部测试可加25名人员,外部测试可加2500名。内部和外部...

OAuth2.0使用access Token时要注意的地方

实现OAuth2.0授权方式前,针对不同的应用我们需要设置应用的授权回调页或进行域名的绑定,用于获得授权成功后返回的code,再通过code获取access_token。 使用开发者...

同时使用jQuery1.9和jQuery2.0要注意的地方

最新jQuery 2.0以及以上版本已经不再支持IE6/7/8,这看起来貌似不方便,但是从长远来看这是一个趋势也是必然的,淘汰旧事物使用新事物是技术发展的必然途径。     但是现在一些产品尤其...

使用 Java HashSet 时要注意的一些地方

HashSet类主要是设计用来做高性能集运算的,例如对两个集合求交集、并集、差集等。集合中包含一组不重复出现且无特性顺序的元素。 HashSet的一些特性如下: 1、HashSet中的值不能重复且...

使用Java的RTTI(运行时类型信息)要注意的地方

如果要使用Class的应用来构造一个对象的示例, 那么这么对象对应的类必须有一个无参数的构造函数,例如:  Class ref=XXX.class; XXX xxxref=ref.newInsta...
  • afeiluo
  • afeiluo
  • 2014年01月02日 15:58
  • 619

新版testFlight中开发人员如何给测试人员推送ios测试包(含使用testFlight要注意的地方)

必备知识: 1.首先需要用Xcode或Application Loader 提交一个ipa包。这个包的Bundle version不可以和已上传的重复,必须用生产证书,生产的bundle id。 2....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用JS在Firefox与IE中要注意的地方
举报原因:
原因补充:

(最多只允许输入30个字)