JavaScript browser compatibility summary and common browser compatibility analysis_javascript skills

This article is a daily compilation by the editor of Script House about js compatibility issues and compatibility analysis of commonly used browsers such as IE and Firefox. Friends who are interested in knowledge about js browser compatibility should learn together!

1. children and childNodes

The behavior of children, childNodes provided by IE and childNodes under firefox are different. ChildNodes under firefox will count newlines and whitespace characters as child nodes of the parent node, while IE's childNodes and children will not. For example:

<div id="dd">
<div>yizhu2000</div>
</div> 

The div with d as dd is viewed using childNodes under IE. The number of child nodes is 1, while under ff it is three. We can see from the dom viewer of firefox that its childNodes are ["n ", div, "n"].

To simulate the children attribute in Firefox we can do this:

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
} 

2. Incidents of firefox and ie

window.event can only be used under IE, but not under Firefox. This is because Firefox's event can only be used at the scene where the event occurs. Firefox must add events from the source for parameter passing. IE ignores this parameter and uses window.event to read the event.

For example, here is how to get the mouse position under IE:

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

needs to be changed to

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script> 

can be used in both browsers

3.HTML object acquisition problem

FireFox acquisition method document.getElementById("idName")

ie use document.idname or document.getElementById("idName")

Solution: Use document.getElementById("idName");

4. const problem

Under Firefox, you can use the const keyword or the var keyword to define constants;

Under IE, you can only use the var keyword to define constants;

Solution: Use the var keyword uniformly to define constants.

5.frame problem

Take the following frame as an example:

<frame src="xxx.html" id="frameId" name="frameName" /> 

a) Access frame object

IE: Use window.frameId or window.frameName to access this frame object. frameId and frameName can have the same name;

Firefox: This frame object can only be accessed using window.frameName;

In addition, you can use window.document.getElementById("frameId") to access this frame object in both IE and Firefox;

b) Switch frame content

Works in both IE and Firefox

window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html"

to switch the content of the frame;

If you need to pass the parameters in the frame back to the parent window (note that it is not opener, but parent), you can use parent in the frame to access the parent window. For example:

parent.document.form1.filename.value="Aqing";

6. Body problem

Firefox’s body exists before the body tag is fully read by the browser; while IE’s body must exist after the body tag is fully read by the browser;

7. The difference between the parent element (parentElement) of firefox and IE

IE: obj.parentElement

firefox:obj.parentNode

Solution: Because both firefox and IE support DOM, they all use obj.parentNode

8.InnerText problem

innerText can work normally in IE, but innerText does not work in FireFox, you need to use textContent;

Solution:

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
} 

9. The difference between AJAX and XMLHTTP

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 

Note: In IE, the content of the xmlhttp.send(content) method can be empty, but in Firefox it cannot be null. Send("") should be used, otherwise a 411 error will occur.

Regarding the JavaScript browser compatibility summary and common browser compatibility analysis introduced in this article, the editor will introduce it to you here. I hope it will be helpful to you!