Home Web Front-end JS Tutorial javascript 浏览器兼容性总结

javascript 浏览器兼容性总结

Jun 01, 2016 am 09:54 AM
javascript compatibility Browser

1. children与childNodes

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

<code class="html"><div id="dd">
<div>yizhu2000</div>
</div></code>
Copy after login

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>
Copy after login

 

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>
Copy after login

需要改成

<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>
Copy after login

才能在两种浏览器下使用

 

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>
Copy after login

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>
Copy after login

来切换frame的内容;

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

<code class="javascript">parent.document.form1.filename.value="Aqing";</code>
Copy after login

 

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>
Copy after login

 

9.AJAX获取XMLHTTP的区别

<code class="javascript">var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}</code>
Copy after login

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? Apr 19, 2025 pm 02:21 PM

The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �...

Why can't JavaScript directly obtain hardware information on the user's computer? Why can't JavaScript directly obtain hardware information on the user's computer? Apr 19, 2025 pm 08:15 PM

Discussion on the reasons why JavaScript cannot obtain user computer hardware information In daily programming, many developers will be curious about why JavaScript cannot be directly obtained...

What to do if the USDT transfer address is incorrect? Guide for beginners What to do if the USDT transfer address is incorrect? Guide for beginners Apr 21, 2025 pm 12:12 PM

After the USDT transfer address is incorrect, first confirm that the transfer has occurred, and then take measures according to the error type. 1. Confirm the transfer: view the transaction history, obtain and query the transaction hash value on the blockchain browser. 2. Take measures: If the address does not exist, wait for the funds to be returned or contact customer service; if it is an invalid address, contact customer service and seek professional help; if it is transferred to someone else, try to contact the payee or seek legal help.

Can JWT implement dynamic permission changes? What is the difference from the Session mechanism? Can JWT implement dynamic permission changes? What is the difference from the Session mechanism? Apr 19, 2025 pm 06:12 PM

Confusion and answers about JWT and Session Many beginners are often confused about their nature and applicable scenarios when learning JWT and Session. This article will revolve around J...

How to correctly generate and display the WeChat applet with parameters QR codes in Java? How to correctly generate and display the WeChat applet with parameters QR codes in Java? Apr 19, 2025 pm 04:48 PM

Generating a WeChat applet QR code with parameters in Java and displaying it on an HTML page is a common requirement. This article will discuss in detail how to use J...

Can two exchanges convert coins to each other? Can two exchanges convert coins to each other? Can two exchanges convert coins to each other? Can two exchanges convert coins to each other? Apr 22, 2025 am 08:57 AM

Can. The two exchanges can transfer coins to each other as long as they support the same currency and network. The steps include: 1. Obtain the collection address, 2. Initiate a withdrawal request, 3. Wait for confirmation. Notes: 1. Select the correct transfer network, 2. Check the address carefully, 3. Understand the handling fee, 4. Pay attention to the account time, 5. Confirm that the exchange supports this currency, 6. Pay attention to the minimum withdrawal amount.

Web3 trading platform ranking_Web3 global exchanges top ten summary Web3 trading platform ranking_Web3 global exchanges top ten summary Apr 21, 2025 am 10:45 AM

Binance is the overlord of the global digital asset trading ecosystem, and its characteristics include: 1. The average daily trading volume exceeds $150 billion, supports 500 trading pairs, covering 98% of mainstream currencies; 2. The innovation matrix covers the derivatives market, Web3 layout and education system; 3. The technical advantages are millisecond matching engines, with peak processing volumes of 1.4 million transactions per second; 4. Compliance progress holds 15-country licenses and establishes compliant entities in Europe and the United States.

How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial Apr 24, 2025 pm 02:06 PM

The steps to register an Ouyi account are as follows: 1. Prepare a valid email or mobile phone number and stabilize the network. 2. Visit Ouyi’s official website. 3. Enter the registration page. 4. Select email or mobile phone number to register and fill in the information. 5. Obtain and fill in the verification code. 6. Agree to the user agreement. 7. Complete registration and log in, carry out KYC and set up security measures.

See all articles