首頁 web前端 js教程 javascript 浏览器兼容性总结

javascript 浏览器兼容性总结

Jun 01, 2016 am 09:54 AM
javascript 相容性 瀏覽器

1. children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如:

<code class="html"><div id="dd">
<div>yizhu2000</div>
</div></code>
登入後複製

d为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做:

<code class="javascript">if (typeof(HTMLElement) != "undefined" && !window.opera) {
  HTMLElement.prototype.__defineGetter__("children", function() {
    for (var a = [], j = 0, n, i = 0; i </code>
登入後複製

 

2. firefox和ie的事件

 

window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。  Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。

比方说下面这个在ie下获得鼠标位置的方法:

<code class="html"><button onclick="onClick()">获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> </code>
登入後複製

需要改成

<code class="html"><button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script></code>
登入後複製

才能在两种浏览器下使用

 

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

解决办法:统一使用document.getElementById("idName");

 

4. const问题

在Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量;

解决方法:统一使用var关键字来定义常量。

 

5.frame问题

以下面的frame为例:

<code class="html"><frame src="xxx.html" id="frameId" name="frameName"></code>
登入後複製

a)访问frame对象

IE:使用window.frameId或者window.frameName来访问这个frame对象,frameId和frameName可以同名;

Firefox:只能使用window.frameName来访问这个frame对象;

另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象;

b) 切换frame内容

在 IE和Firefox中都可以使用

<code class="javascript">window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"</code>
登入後複製

来切换frame的内容;

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent),可以在frame中使用parent来访问父窗口。例如:

<code class="javascript">parent.document.form1.filename.value="Aqing";</code>
登入後複製

 

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在;

 

7. firefox与IE的父元素(parentElement)的区别

IE:obj.parentElement

firefox:obj.parentNode

解决方法:因为firefox与IE都支持DOM,因此全部使用obj.parentNode

 

8.innerText的问题

innerText在IE中能正常工作,但是innerText在FireFox中却不行,需用textContent;

解决方法:

<code class="javascript">if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById('element').innerText = "my text";
} else {
  document.getElementById('element').textContent = "my text";
} </code>
登入後複製

 

9.AJAX获取XMLHTTP的区别

<code class="javascript">var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}</code>
登入後複製

注意:在IE中,xmlhttp.send(content)方法的content可以为空,而firefox则不能为null,应该用send(""),否则会出现411错误。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

apache服務器是什麼 apache服務器是乾嘛的 apache服務器是什麼 apache服務器是乾嘛的 Apr 13, 2025 am 11:57 AM

Apache服務器是強大的Web服務器軟件,充當瀏覽器與網站服務器間的橋樑。 1. 它處理HTTP請求,根據請求返回網頁內容;2. 模塊化設計允許擴展功能,例如支持SSL加密和動態網頁;3. 配置文件(如虛擬主機配置)需謹慎設置,避免安全漏洞,並需優化性能參數,例如線程數和超時時間,才能構建高性能、安全的Web應用。

解決 Craft CMS 中的緩存問題:使用 wiejeben/craft-laravel-mix 插件 解決 Craft CMS 中的緩存問題:使用 wiejeben/craft-laravel-mix 插件 Apr 18, 2025 am 09:24 AM

在使用CraftCMS開發網站時,常常會遇到資源文件緩存的問題,特別是當你頻繁更新CSS和JavaScript文件時,舊版本的文件可能仍然被瀏覽器緩存,導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗,還會增加開發和調試的難度。最近,我在項目中遇到了類似的困擾,經過一番探索,我找到了wiejeben/craft-laravel-mix這個插件,它完美地解決了我的緩存問題。

HDFS文件系統在CentOS上的使用技巧 HDFS文件系統在CentOS上的使用技巧 Apr 14, 2025 pm 07:30 PM

CentOS系統下HDFS文件系統的安裝、配置及優化指南本文將指導您如何在CentOS系統上安裝、配置和優化Hadoop分佈式文件系統(HDFS)。 HDFS安裝與配置Java環境安裝:首先,確保已安裝合適的Java環境。編輯/etc/profile文件,添加以下內容,並將/usr/lib/java-1.8.0/jdk1.8.0_144替換為您的實際Java安裝路徑:exportJAVA_HOME=/usr/lib/java-1.8.0/jdk1.8.0_144exportPATH=$J

Nginx性能監控與故障排查工具使用 Nginx性能監控與故障排查工具使用 Apr 13, 2025 pm 10:00 PM

Nginx性能監控與故障排查主要通過以下步驟進行:1.使用nginx-V查看版本信息,並啟用stub_status模塊監控活躍連接數、請求數和緩存命中率;2.利用top命令監控系統資源佔用,iostat和vmstat分別監控磁盤I/O和內存使用情況;3.使用tcpdump抓包分析網絡流量,排查網絡連接問題;4.合理配置worker進程數,避免並發處理能力不足或進程上下文切換開銷過大;5.正確配置Nginx緩存,避免緩存大小設置不當;6.通過分析Nginx日誌,例如使用awk和grep命令或ELK

Tomcat日誌中如何查看線程狀態 Tomcat日誌中如何查看線程狀態 Apr 13, 2025 am 08:36 AM

要查看Tomcat日誌中的線程狀態,您可以採用以下幾種方法:TomcatManagerWeb界面:在瀏覽器中輸入Tomcat的管理地址(通常為http://localhost:8080/manager),登錄後即可查看線程池的狀態。 JMX監控:使用JMX監控工具(如JConsole)連接到Tomcat的MBean服務器,查看Tomcat線程池的狀態。在JConsole中選擇

如何在CentOS上監控HDFS狀態 如何在CentOS上監控HDFS狀態 Apr 14, 2025 pm 07:33 PM

在CentOS系統上監控HDFS(Hadoop分佈式文件系統)狀態有多種途徑。本文將介紹幾種常用方法,助您選擇最合適的方案。 1.利用Hadoop自帶的WebUIHadoop自帶的Web界面提供集群狀態監控功能。步驟:確保Hadoop集群已啟動並運行。訪問WebUI:在瀏覽器中輸入http://:50070(Hadoop2.x)或http://:9870(Hadoop3.x)。默認用戶名和密碼通常為hdfs/hdfs。 2.命令行工具監控Hadoop提供一系列命令行工具,方便監

Nginx日誌分析與統計,了解網站訪問情況 Nginx日誌分析與統計,了解網站訪問情況 Apr 13, 2025 pm 10:06 PM

本文介紹瞭如何分析Nginx日誌以提升網站性能和用戶體驗。 1.理解Nginx日誌格式,例如時間戳、IP地址、狀態碼等;2.使用awk等工具解析日誌,統計訪問量、錯誤率等指標;3.根據需求編寫更複雜的腳本或使用更高級工具,例如goaccess,分析不同維度的數據;4.對於海量日誌,考慮使用Hadoop或Spark等分佈式框架。通過分析日誌,可以識別網站訪問模式、改進內容策略,並最終優化網站性能和用戶體驗。

Debian OpenSSL如何配置HTTPS服務器 Debian OpenSSL如何配置HTTPS服務器 Apr 13, 2025 am 11:03 AM

在Debian系統上配置HTTPS服務器涉及幾個步驟,包括安裝必要的軟件、生成SSL證書、配置Web服務器(如Apache或Nginx)以使用SSL證書。以下是一個基本的指南,假設你使用的是ApacheWeb服務器。 1.安裝必要的軟件首先,確保你的系統是最新的,並安裝Apache和OpenSSL:sudoaptupdatesudoaptupgradesudoaptinsta

See all articles