JavaScript的常見兼容問題及相關解決方法(chrome/IE/firefox)
更新時間：2013年12月31日 09:16:09 作者：
本篇文章只要是對JavaScript的常見兼容問題及相關解決方法(chrome/IE/firefox)進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
首先這里聲明一下，關于我測試瀏覽器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester
下面的代碼關于聲明
1：獲得滾動條的情況
復制代碼 代碼如下:
function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;//滾動條的頂端
l = document.documentElement.scrollLeft;//滾動條的左端
w = document.documentElement.scrollWidth;//滾動條的寬度，也就是頁面的寬度
h = document.documentElement.scrollHeight;//滾動條的高度
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
2：獲得視圖瀏覽器的寬度高度
復制代碼 代碼如下:
function getPageWidth(){
var pageWidth = window.innerWidth;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
}
else {
pageWidth = document.body.clientWidth;
}
}
return pageWidth;
}
function getPageHeight(){
var pageHeight = window.innerHeight;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageHeight = document.documentElement.clientHeight;
}
else {
pageHeight = document.body.clientHeight;
}
}
return pageHeight;
}
3：獲得當前瀏覽器型號 名字
復制代碼 代碼如下:
function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie != null) {
return ("IE:" + Sys.ie);//判斷IE瀏覽器及版本號
}
if (Sys.firefox != null) {
return ("firefox:" + Sys.firefox);//判斷firefox瀏覽器及版本號
}
if (Sys.chrome != null) {
return ("chrome:" + Sys.chrome);//判斷chrome瀏覽器及版本號
}
if (Sys.opera != null) {
return ("opera:" + Sys.opera);//判斷opera瀏覽器及版本號
}
if (Sys.safari != null) {
return ("safari:" + Sys.safari);//判斷safari瀏覽器及版本號
}
}
4：事件監(jiān)聽
復制代碼 代碼如下:
function(element, type, handler){
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
else
if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
else {
element["on" + type] = handler;
}
}
5：事件移除
復制代碼 代碼如下:
function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
else
if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
6：獲得event，F(xiàn)irefox事件不斷派發(fā)的時候，第一次事件會出現(xiàn)問題。
復制代碼 代碼如下:
function(event){
event = (event ? event : window.event);
if (event == null) {
var $E = function(){
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
};
__defineGetter__("event", $E);
}
return event;
}
7：阻止默認事件
復制代碼 代碼如下:
function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
8：不繼續(xù)傳播事件
復制代碼 代碼如下:
function(event){
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
9：獲得event的target
復制代碼 代碼如下:
function(event){
return event.target || event.srcElement;
}
10：documen.doctype支持不一致
E：如果存在文檔類型說明，會將其錯誤的解釋為一個注釋并把它當做Comment節(jié)點，document.doctype的值始終是null。
Firefox：如果存在文檔類型說明，則將其作為文檔的第一個子節(jié)點，document.doctype是一個DocumentType節(jié)點，也可以通過firstChild或者childNodes[0]訪問同一個節(jié)點。
Safari、Chrome、Opera：如果存在文檔類型說明，則將其作為解釋，但不作為文檔的子節(jié)點，不會出現(xiàn)在childNodes中的。
11：查找元素
我有時候，我真搞不明白，IE總是在搞什么，總是想標新立異。如果系統(tǒng)不讓自帶瀏覽器的話，我敢說，IE的份額將會更少。
如果id和name一樣的話，他也將被返回
復制代碼 代碼如下:
<html>
<head>
<script defer>
var item=document.getElementById("my");
item.value="SECOND";
</script>
</head>
<body>
<input type="text" name="my" value="FIRST" >
</body>
</html>
在IE中，結果變化了。
同樣是IE，Id大小寫不區(qū)分
復制代碼 代碼如下:
<html>
<head>
<script defer>
var item=document.getElementById("MY");
item.value="SECOND";
</script>
</head>
<body>
<input type="text" id="my" value="FIRST" >
</body>
</html>
不好意思，他的結果又變化了。
12：如果是自定義屬性的話，item.myattributs在非IE瀏覽器的情況下，是無法得出正確結果的。
復制代碼 代碼如下:
function(item,myatt){
return item.attributes[myatt].value;
}
同樣的話，設置屬性應該知道怎么辦吧，就是賦值唄。
復制代碼 代碼如下:
function(item,myatt,value){
item.attributes[myatt].value=value;
}
13：元素的子節(jié)點個數(shù)
復制代碼 代碼如下:
<ul id="myul">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
IE結果是3，其他瀏覽器是7。
Node之間的空白符，在其他瀏覽器是文本節(jié)點，結果就是7。如果變成這樣，
復制代碼 代碼如下:
<ul id="myul"><li>first</li><li>second</li><li>third</li></ul>
這樣大家的結果都是3了。
14：創(chuàng)立節(jié)點問題
復制代碼 代碼如下:
//動態(tài)添加Element，所有的瀏覽器都可以實現(xiàn)
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//在IE中可以還這么實現(xiàn)
var newnode= document.createElement("<input type=\"button\">");
15：在屏蔽右鍵的時候，firefox與其他的不一樣，在oncontextmenu事件中。
16：還有動態(tài)添加style和script的時候，IE和其他的瀏覽器是不一樣的。具體查查。
17：對于DOM2和DOM3，情況更復雜了。
您可能感興趣的文章:
- 表單JS彈出填寫提示效果代碼
- 實用的JS表單驗證提示效果
- javascript寫的一個表單動態(tài)輸入提示的代碼
- js+css實現(xiàn)增加表單可用性之提示文字
- js下在password表單內(nèi)顯示提示信息的解決辦法
- js實現(xiàn)表單檢測及表單提示的方法
- JavaScript DOM學習第八章 表單錯誤提示
- javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
- IE8的JavaScript點擊事件(onclick)不兼容的解決方法
- 讓ie運行js時提示允許阻止內(nèi)容運行的解決方法
- Javascript在IE下設置innerHTML時出現(xiàn)未知的運行時錯誤的解決方法
- IE瀏覽器下JS腳本提交表單后，不能自動提示問題解決方法
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲簡易版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
本文主要介紹了JS批量替換內(nèi)容中關鍵詞為超鏈接，避開已存在的鏈接和alt、title中的關鍵詞的方法。下面跟著小編一起來看下吧2017-02-02
JS面向?qū)ο缶幊虒崿F(xiàn)的Tab選項卡案例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊虒崿F(xiàn)的Tab選項卡,結合具體案例形式詳細分析了JS基于面向?qū)ο蟪绦蛟O計實現(xiàn)Tab選項卡的相關操作技巧,需要的朋友可以參考下2020-03-03
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理且更強大,這篇文章主要給大家介紹了關于如何一步步實現(xiàn)一個簡易promise的相關資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了微信小程序表單彈窗實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
輪播圖是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關于微信小程序滾動、輪播圖和文本的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本篇文章主要是對js特殊字符過濾的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了js Math數(shù)學簡單使用,結合實例形式分析了js Math數(shù)學相關函數(shù)的基本用法與操作注意事項,需要的朋友可以參考下2020-03-03
javascript DOM對象的學習實例代碼2009-06-06
JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法
這篇文章主要介紹了JS在Chrome瀏覽器中showModalDialog函數(shù)返回值為undefined的解決方法,涉及javascript針對谷歌瀏覽器事件判定相關操作技巧,需要的朋友可以參考下2016-08-08