Browser compatibility issues in JavaScript

Browser compatibility issues are an easy to ignore and most important part of real-world development. Before we talk about the old version of browser compatibility, the first thing to know is the ability detection, which is to detect whether the browser has the ability to determine if the current browser supports the property or method to invoke. Here are some brief introductions.

1, InnerText and Innercontent

1) InnerText and innercontent function the same

2) browser support prior to InnerText IE8

3) innercontent old version of Firefox support

4) New versions of browsers are supported in both ways

Older versions of browsers compatible with InnerText and innercontent

if (element.textcontent) {

return element.textcontent;

} else {

return element.innertext;

}

2. Get sibling node/element compatibility issues

1) sibling node, all browsers supported

①nextsibling the next sibling node, possibly a non-element node, gets to the text node ②previoussibling the previous sibling node, possibly a non-element node, gets to the text node

2) Sibling elements, IE8 not previously supported

①previouselementsibling gets the previous sibling element, ignoring whitespace

②nextelementsibling gets the next adjacent sibling element, ignoring whitespace

Browser compatible

Get the next immediate sibling element

function Getnextelement (Element) {

Capability Testing

if (element.nextelementsibling) {

return element.nextelementsibling;

} else {

var node = element.nextsibling;

while (node && node.nodetype!== 1) {

node = node.nextibling;

}

return node;

}

}

/**

* Returns the previous element

* @param element

* @returns {*}

*/

function Getpreviouselement (Element) {

if (element.previouselementsibling) {

return element.previouselementsibling;

}else {

var el = element.previoussibling;

While (El && el.nodetype!== 1) {

el = el.previoussibling;

}

Return el;

}

}

/**

* Returns the first element Firstelementchild browser compatible

* @param Parent

* @returns {*}

*/

function Getfirstelement (parent) {

if (parent.firstelementchild) {

return parent.firstelementchild;

}else {

var el = Parent.firstchild;

While (El && el.nodetype!== 1) {

el = el.nextsibling;

}

Return el;

}

}

/**

* Returns the last element

* @param Parent

* @returns {*}

*/

function Getlastelement (parent) {

if (parent.lastelementchild) {

return parent.lastelementchild;

}else {

var el = Parent.lastchild;

While (El && el.nodetype!== 1) {

el = el.previoussibling;

}

Return el;

}

}

/**

* Gets all sibling elements of the current element

* @param element

* @returns {Array}

*/

function sibling (element) {

if (!element) return;

var elements = [];

var el = element.previoussibling;

while (EL) {

if (El.nodetype = = = 1) {

Elements.push (EL);

}

el = el.previoussibling;

}

el = element.previoussibling;

while (EL) {

if (El.nodetype = = = 1) {

Elements.push (EL);

}

el = el.nextsibling;

}

return elements;

}

3, Array.filter ();

Tests all elements with the specified function and creates a new array that contains all the elements passed by the test

Compatibility with legacy environments

if (! Array.prototype.filter)

{

Array.prototype.filter = function (Fun/*, Thisarg */)

{

"Use strict";

if (this = = = void 0 | | this = = = null)

throw new TypeError ();

var t = Object (this);

var len = t.length >>> 0;

if (typeof fun!== "function")

throw new TypeError ();

var res = [];

var thisarg = arguments.length >= 2? ARGUMENTS[1]: void 0;

for (var i = 0; i < len; i++)

{

if (i in t)

{

var val = t[i];

Note:technically this should object.defineproperty at

The next index, as push can be affected by

Properties on Object.prototype and Array.prototype.

But the method ' s new, and collisions should be

Rare, so use the more-compatible alternative.

if (Fun.call (Thisarg, Val, I, T))

Res.push (Val);

}

}

return res;

};

}

4, Array.foreach ();

Iterating through an array

Compatibility with legacy environments

Production steps of ECMA-262, Edition 5, 15.4.4.18

reference:http://es5.github.io/#x15.4.4.18

if (! Array.prototype.forEach) {

Array.prototype.forEach = function (callback, THISARG) {

var T, K;

if (this = = null) {

throw new TypeError (' This was null or not defined ');

}

1. Let O is the result of calling Toobject () passing the

|this| Value as the argument.

var O = Object (this);

2. Let Lenvalue be the result of calling the Get () internal

Method of O with the argument "Length".

3. Let Len be ToUint32 (lenvalue).

var len = o.length >>> 0;

4. If Iscallable (callback) is false, throw a TypeError

exception. see:http://es5.github.com/#x9.11

if (typeof callback!== "function") {

throw new TypeError (callback + ' is not a function ');

}

5. If Thisarg is supplied, let T is thisarg; else let

T be undefined.

if (Arguments.length > 1) {

T = Thisarg;

}

6. Let K is 0

k = 0;

7. Repeat, while K < Len

while (K < Len) {

var Kvalue;

A. Let Pk be ToString (k).

This was implicit for LHS operands of the operator

B. Let Kpresent be the result of calling the Hasproperty

Internal method of O with argument Pk.

This step can is combined with C

C. If Kpresent is true and then

if (k in O) {

I. Let Kvalue be the result of calling the Get internal

Method of O with argument Pk.

Kvalue = O[k];

Ii. Call the call internal method of callback with T as

The This value and argument list containing Kvalue, K, and O.

Callback.call (T, Kvalue, K, O);

}

D. Increase K by 1.

k++;

}

8. return undefined

};

}

5. Registration Events

AddEventListener = function (type,listener,usecapture) {};

First parameter event name

Second parameter event handler function (listener)

The third parameter, True, captures false bubbles

IE9 Support Later

Compatibility with legacy environments

var eventtools = {

Addeventlistener:function (element, EventName, listener) {

Capability Testing

if (Element.addeventlistener) {

Element.addeventlistener (EventName, Listener,false);

}else if (element.attachevent) {

Element.attachevent ("on" + eventName, listener);

}else{

Element["on" + eventName] = listener;

}

},

To remove an event, you cannot use an anonymous function

Removeeventlistener:function (element, EventName, listener) {

if (Element.removeeventlistener) {

Element.removeeventlistener (Eventname,listener,false);

}else if (element.detachevent) {//IE8 previously registered. Attachevent and remove events. DetachEvent

Element.detachevent ("on" +eventname,listener);

}else{

Element["on" + eventName] = null;

}

}

};

6. Event Object1) event parameter E, is the event object, the standard way to get

Btn.onclick = function (e) {}

2) E.eventphase event phase, IE8 not previously supported

3) E.target is always the object that triggered the event (click the button)

i) IE8 before srcelement

II) browser compatible

var target = E.target | | Window.event.srcElement;

Get Event Object compatible browser

Getevent:function (e) {

Return E | |  window.event; E The method of obtaining the standard of the event object; window.event IE8 How the event object was previously acquired

}

Compatible with target

Gettarget:function (e) {

return E.target | | E.srcelement;

}

7. Get the position of the mouse on the page

① position in the viewable area: E.clientx E.clienty

② position in the document:

i) E.pagex E.pagey

II) browser compatible

var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;

var pagey = E.clienty + scrolltop;

8, get the distance of page scrolling

Browser compatible

var scrolltop = Document.documentElement.scrollTop | | Document.body.scrolltop;

9. Cancellation of text selection

Browser compatible

Window.getselection? Window.getselection (). Removeallranges (): Document.selection.empty ();

　　

"Summary" Here is just a part of the summary, the actual development will also encounter a variety of browser-compatible issues. Different browsers in the PC side and mobile phone will also encounter different adaptation problems, these are waiting for children's shoes together to explore the summary ~ ~ Hope to help everyone, insufficient places please more advice ~ ~ ~

Browser compatibility issues in JavaScript