轉載 Javascript的IE和Firefox兼容性匯編

微軟關于IE、Firefox、Opera和Safari的JavaScript兼容性研究曾經發表過一份草案,可以點擊下載《JScript Deviations from ES3?以下為網上的一些搜集和整理(FF代表Firefox)

?集合類對象問題
現有代碼中存在許多 document.form.item("itemName") 這樣的語句,不能在 FF 下運行
解決方法:
改用 document.form.elements["elementName"]
說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.
解決方法:統一使用[]獲取集合類對象.


window.event
現有問題:
使用 window.event 無法在 FF 上運行
解決方法:
FF 的 event 只能在事件發生的現場使用,此問題暫無法解決。可以這樣變通:
原代碼(可在IE中運行):
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
<script language="javascript">
??? function gotoSubmit() {
?????? alert(window.event);??? // use window.event
??? }
</script>
新代碼(可在IE和FF中運行):
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
?? function gotoSubmit(e) {
????? e = e? e : (window.event ? window.event : null);
????? alert(e);???????????
? }
</script>
此外,如果新代碼中第一行不改,與老代碼一樣的話(即 gotoSubmit 調用沒有給參數),則仍然只能在IE中運行,但不會出錯。所以,這種方案 tpl 部分仍與老代碼兼容。

?

HTML 對象的 id 作為對象名的問題
現有問題:
在 IE 中,HTML 對象的 ID 可以作為 document 的下屬對象變量名直接使用。在 FF 中不能。
解決方法:
用 getElementById("idName") 代替 idName 作為對象變量使用。

用idName字符串取得對象的問題
現有問題:
在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象,在FF 中不能。
解決方法:
用 getElementById(idName) 代替 eval(idName)。

?

變量名與某 HTML 對象 id 相同的問題
現有問題:
在 FF 中,因為對象 id 不作為 HTML 對象的名稱,所以可以使用與 HTML 對象 id 相同的變量名,IE 中不能。
解決方法:
在聲明變量時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常運行。
此外,最好不要取與 HTML 對象 id 相同的變量名,以減少錯誤。

?

event.x 與 event.y 問題
現有問題:
在IE 中,event 對象有 x, y 屬性,FF中沒有。
解決方法:
在FF中,與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
故采用 event.clientX 代替 event.x。在IE 中也有這個變量。
event.clientX 與 event.pageX 有微妙的差別(當整個頁面有滾動條的時候),不過大多數時候是等效的。
如果要完全一樣,可以稍麻煩些:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
其它:
event.layerX 在 IE 與 FF 中都有,具體意義有無差別尚未試驗。

?

關于frame
現有問題:
在 IE中 可以用window.testFrame取得該frame,FF中不行
解決方法:
在frame的使用方面FF和ie的最主要的區別是:
如果在frame標簽中書寫了以下屬性:
<frame src="/xx.htm" id="frameId" name="frameName" />
那么ie可以通過id或者name訪問這個frame對應的window對象
而FF只可以通過name來訪問這個frame對應的window對象
例如如果上述frame標簽寫在最上層的window里面的htm里面,那么可以這樣訪問
IE: window.top.frameId或者window.top.frameName來訪問這個window對象
FF: 只能這樣window.top.frameName來訪問這個window對象
另外,在FF和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標簽
并且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容
也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內容

?

父結點的問題
在FF中沒有 parentElement parentElement.children? 而用 parentNode parentNode.childNodes
childNodes的下標的含義在IE和FF中不同,FF使用DOM規范,childNodes中會插入空白文本節點。
一般可以通過node.getElementsByTagName()來回避這個問題。當html中節點缺失時,IE和FF對parentNode的解釋不同,例如
<form>
<table>
? <input/>
</table>
</form>
FF中input.parentNode的值為form, 而IE中input.parentNode的值為空節點
FF中節點沒有removeNode方法,必須使用如下方法 node.parentNode.removeChild(node)

?

const 問題
現有問題:
在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
解決方法:
不使用 const ,以 var 代替。

body 對象
FF的body在body標簽沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入之后才存在

?

URLencoding
在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不會被正常顯示以至于參數沒有正確的傳到服務器
一般會服務器報錯參數沒有找到
當然如果是在tpl中例外,因為tpl中符合xml規范,要求&書寫為&
一般FF無法識別js中的&

?

nodeName 和 tagName 問題
現有問題:
在FF中,所有節點均有 nodeName 值,但 textNode 沒有 tagName 值。在 IE 中,nodeName 的使用好象有問題
解決方法:
使用 tagName,但應檢測其是否為空。

?

元素屬性
IE下 input.type屬性為只讀,但是FF下可以修改
document.getElementsByName() 和 document.all[name] 的問題
在 IE 中,getElementsByName()、document.all[name] 均不能用來取得多個具有相同name的div 元素集合。

?

兼容firefox的 outerHTML,FF中沒有outerHtml的方法

if (window.HTMLElement) {
? HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
??????? var r=this.ownerDocument.createRange();
??????? r.setStartBefore(this);
??????? var df=r.createContextualFragment(sHTML);
??????? this.parentNode.replaceChild(df,this);
??????? return sHTML;
??? });

??? HTMLElement.prototype.__defineGetter__("outerHTML",function() {
??????? var attr;
??????? var attrs=this.attributes;
??????? var str="<"+this.tagName.toLowerCase();
??????? for (var i=0;i<attrs.length;i++) {
??????????? attr=attrs[i];
??????????? if(attr.specified)
??????????????? str+=" "+attr.name+'="'+attr.value+'"';
??????? }

??????? if(!this.canHaveChildren)
??????????? return str+">";
??????? return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
??????? });

?? HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
???? switch(this.tagName.toLowerCase()) {
???????? case "area":
???????? case "base":
???????? case "basefont":
???????? case "col":
???????? case "frame":
???????? case "hr":
???????? case "img":
???????? case "br":
???????? case "input":
???????? case "isindex":
???????? case "link":
???????? case "meta":
???????? case "param":
???????? return false;
???? }
???? return true;
?? });
}


自定義屬性問題
說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;FF下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.

?
event.srcElement問題
說明:IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.


window.location.href問題
說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解決方法:使用window.location來代替window.location.href.


模態和非模態窗口問題
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口
如 果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

?

事件委托方法
IE:document.body.onload = inject; //Function inject()在這之前已被實現
FF:document.body.onload = inject();
如果要加傳遞參數,可以做個閉包
(function(arg){

?? document.body.οnlοad=function(){inject(arg);};

})(arg)

innerText在IE中能正常工作,但是innerText在FireFox中卻不行.
解決方法:
if(navigator.appName.indexOf("Explorer") > -1){
??? document.getElementById('element').innerText = "my text";
} else{
??? document.getElementById('element').textContent = "my text";
}


FF中類似 obj.style.height = imgObj.height 的語句無效
解決方法:
obj.style.height = imgObj.height + 'px';


IE,FF以及其它瀏覽器對于 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);


樣式部分
-----------------------------------------------------------------------------------------------------------
cursor:hand VS cursor:pointer
FF不支持hand,但ie支持pointer
解決方法: 統一使用pointer

padding 問題
padding 5px 4px 3px 1px FireFox無法解釋簡寫,
必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

消除ulol等列表的縮進時
樣式應寫成:list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效,padding屬性對FireFox有效

CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF:opacity:0.6

CSS圓角
IE:不支持圓角
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;

CSS雙線凹凸邊框
IE:border:2px outset;
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

轉載于:https://www.cnblogs.com/wangbin/archive/2009/04/14/1435442.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/379696.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/379696.shtml
英文地址,請注明出處:http://en.pswp.cn/news/379696.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

存儲器間接尋址方式_8086微處理器的程序存儲器尋址模式

存儲器間接尋址方式The Program Memory Addressing mode is used in branch instructions. These branch instructions are instructions which are responsible for changing the regular flow of the instruction execution and shifting the control to some other location…

Servlet的配置

1&#xff0c;基本配置 <!-- Servlet類的配置 --><servlet><servlet-name>sq</servlet-name><servlet-class>beyond.servlet.QuickStartServlet</servlet-class></servlet><!-- Servlet的虛擬路徑的配置 --> <servlet-mapp…

Asp.net頁面生存周期

# 事件或方法 功能 描述   1 Init 事件 頁面初始化 初始化設置。   2 LoadViewState 方法 加載視圖狀態 填充ViewState屬性。   3 LoadPostData 方法 處理回發數據 處理傳入窗體數據。   4 Load 事件 加載頁面 頁面控件初始化完成并反映了客戶端的數據。   5 RaisePo…

你正確關閉WCF鏈接了嗎?

通常情況下我們關閉一個WCF鏈接都是簡單地寫把ICommunicationObject.Close()方法&#xff0c;但是這個方法有個問題就是當調用發生異常時&#xff0c;Close()會發生次生的異常&#xff0c;導致鏈接不能正常關閉。如果當這種異常很多時&#xff0c;必然對系統的穩定性有很大的影…

Visual Studio進行linux遠程開發

目錄準備工作創建一個項目配置遠程項目準備工作 查看linux IP地址 安裝了工具 sudo apt-get install openssh-server g gdb make ninja-build rsync zip開啟ssh服務&#xff1a; sudo service ssh startVS2019按裝了linux功能&#xff0c;如果沒有&#xff0c;找到Visual S…

在給定總和K的二叉樹中找到級別

Description: 描述&#xff1a; The article describes how to find the level in a binary tree with given sum K? This is an interview coding problem came in Samsung, Microsoft. 本文介紹了如何在給定總和K下在二叉樹中找到級別 &#xff1f; 這是一個面試編碼問題&a…

PostgreSQL學習手冊(數據庫維護) 轉

原文&#xff1a; PostgreSQL學習手冊(數據庫維護)一、恢復磁盤空間&#xff1a;在PostgreSQL中&#xff0c;使用delete和update語句刪除或更新的數據行并沒有被實際刪除&#xff0c;而只是在舊版本數據行的物理地址上將該行的狀態置為已刪除或已過期。因此當數據表中的數據變化…

++i與i++的根本性區別(兩個代碼對比搞定)

首先來看i 代碼如下&#xff1a; #include <stdio.h> #include <stdlib.h> int main() {int i0;int ai;printf("%d\n",a);printf("%d\n\n\n",i);return 0; }輸出結果如下&#xff1a; 解釋&#xff1a;i其實是兩行代碼的簡寫形式&#xff0c…

國企和外企的比較

由于本人在外企&#xff0c;而很多朋友在國企&#xff0c;因此我個人的說法應該還是有一定的權威性。 首先&#xff0c;國企和外企不能一概而論。正如任何事物都有三六九等&#xff0c;這個&#xff0c;只能在同等級別上進行比較。 國企分類&#xff1a; 一等國企&#xff1…

Python | 使用matplotlib.pyplot創建線圖

Problem statement: Write a program in python (using matplotlib.pyplot) to create a line plot. 問題陳述&#xff1a;用python編寫程序(使用matplotlib.pyplot)以創建線圖。 Program: 程序&#xff1a; import matplotlib.pyplot as pltx [1,2,3,4,5,6,7,8,9,10]y [3,…

QI(接口查詢)

接觸AE一段時間了&#xff0c;總的來說收獲不少&#xff0c;今天仔細分析了一下AE開發中經常會用到的QI即接口查詢&#xff0c;有了自己的一些理解。 COM類至少有一個接口。事實上一般它們有好幾個接口。即一個類經常會實現多個接口&#xff08;一個類無法繼承多個類&#xff0…

linux內核設計與實現---從內核出發

獲取、編譯、安裝內核1 獲取內核源碼安裝內核源代碼何處安裝源碼使用補丁2 內核源碼樹3 編譯內核減少編譯的垃圾信息衍生多個編譯作業安裝內核啟用指定內核作為引導4 內核開發的特點沒有libc庫頭文件沒有內存保護機制容積小而固定的棧1 獲取內核源碼 在linux內核官方網站http:…

MySQL在DOS下的基本命令操作

啟動net start mysql 重置root密碼 方法一:在my.ini的[mysqld]字段加入&#xff1a; skip-grant-tables 重啟mysql服務&#xff0c;這時的mysql不需要密碼即可登錄數據庫然后進入mysql mysql>use mysql;mysql>更新 user set passwordpassword(新密碼) WHERE Userroot; …

strlen的神奇實現

https://blog.delphij.net/2012/04/freebsd-strlen3.html 與 Pascal 等語言不同&#xff0c;C 的字符串并不保存串的長度&#xff0c;而是在字符串末尾以 nul 字符&#xff08;\0&#xff09;來表示字符串結束。這個設計決策是上世紀 60 年代作出的&#xff0c;有都市傳說是為了…

python求和_Python程序查找特殊求和系列的解決方案

python求和We are going to design a special sum series function which has following characteristics: 我們將設計一個特殊的求和系列函數&#xff0c;該函數具有以下特征&#xff1a; f(0) 0f(1) 1f(2) 1f(3) 0f(x) f(x-1) f(x-3)Python solution of the above sum…

linux內核設計與實現---進程管理

進程管理1 進程描述符及任務結構分配進程描述符進程描述符的存放進程狀態設置當前進程狀態進程上下文進程家族樹2 進程創建寫時拷貝fork()vfork()3 線程在Linux中的實現內核線程4 進程終結刪除進程描述符孤兒進程造成的進退微谷5 小結進程的另一個名字叫做任務&#xff08;task…

JS錯誤代碼解釋大全+VBS錯誤代碼解釋大全

JScript 運行時錯誤 JScript 運行時錯誤是指當 JScript 腳本試圖執行一個系統不能運行的動作時導致的錯誤。當正在運行腳本、計算變量表達式、或者正在動態分配內存時出現 JScript 運行時錯誤時。 錯誤號 描述 5029 數組長度必須為一有限正整數 5030 必須賦給數組長度一個有…

生日蠟燭(藍橋杯)

某君從某年開始每年都舉辦一次生日party&#xff0c;并且每次都要吹熄與年齡相同根數的蠟燭。 現在算起來&#xff0c;他一共吹熄了236根蠟燭。 請問&#xff0c;他從多少歲開始過生日party的&#xff1f; 請填寫他開始過生日party的年齡數。 注意&#xff1a;你提交的應該是…

python日歷模塊_Python日歷模塊| firstweekday()方法與示例

python日歷模塊Python calendar.firstweekday()方法 (Python calendar.firstweekday() Method) firstweekday() method is an inbuilt method of the calendar module in Python. It works on simple text calendars and returns the current setting for the weekday to start…

php 處理 mysql to json, 前臺js處理

public function GetJson(){$query"select * from table";$result mysql_query($query);$rows array();while($row mysql_fetch_array($result)){$rows [] $row;}echo json_encode($rows); } js處理 $.get( "./bll.php", option,function(data ) {var j…