Browser compatibility issues

Quote the article of the boss: https://blog.csdn.net/zfangls/article/details/53908063

javascript :
1.HTML object acquisition problem
FireFox: document.getElementById("idName");
ie:document.idname or document.getElementById("idName")
Solution: uniformly use document.getElementById("idName");

2.const problem
Note: in Firefox, const keyword or var keyword can be used to define constants;
Under IE, you can only use the var keyword to define constants
Solution: use the var keyword to define constants

3.event.x and event.y problems
Note: under IE, the event object has x and Y attributes, but does not have pagex and pagey attributes;
In Firefox, the event object has pagex and pagey attributes, but no X and Y attributes
Solution: use MX (MX = event.x? event.x: event. Pagex;) to replace event.x under IE or event.pageX under Firefox

4.window.location.href problem
Note: under IE or Firefox 2.0. X, you can use window.location or window.location.href;
Under Firefox 1.5. X, you can only use window.location
Solution: use window.location instead of window.location.href

5. The difference between Firefox and IE's parent element
IE: obj.parentElement
firefox: obj.parentNode
Solution: because both firefox and IE support DOM, using obj.parentNode is a good choice

6. Set class object problem
Problem Description: under IE, you can use () or [] to obtain collection class objects; Under Firefox, you can only use [] to get collection class objects.
Solution: uniformly use [] to obtain collection class objects.

7. Custom attribute problem
Problem Description: under IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes; Under Firefox, you can only use getattribute () to get custom attributes.
Solution: get custom attributes through getAttribute().

8.input.type attribute problem
Problem Description: the input.type attribute under IE is read-only; However, the input.type attribute under Firefox is read-write.
Solution: do not modify the input.type attribute. If you have to modify it, you can hide the original input first, and then insert a new input element in the same position.

9. Event.srclelement problem
Problem Description: under IE, the event object has the srclelement attribute, but does not have the target attribute; In Firefox, the event object has a target attribute but no srclelement attribute.
Solution: use srcobj = event.srclelement? event.srcElement : event.target;

10.event issues

document.onclick=function(ev){//The writing method of Google Firefox is supported above IE9 and not below;
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//Google and IE support, Firefox does not support;
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//Compatible writing;
        var e=ev||window.event;
        var mouseX=e.clientX;//Coordinates of the X axis of the mouse
        var mouseY=e.clientY;//Coordinates of the Y axis of the mouse
    }
.DOM Node related problems

//DOM node related, mainly compatible with IE 6 7 8
    function nextnode(obj){//Get the next sibling node
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//Get previous sibling node
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//Get the first child node
        if (obj.firstElementChild) {
            return obj.firstElementChild;//Non IE678 support
        } else{
            return obj.firstChild;//IE678 support
        };
    }
    function lastnode(obj){//Get the last child node
        if (obj.lastElementChild) {
            return obj.lastElementChild;//Non IE678 support
        } else{
            return obj.lastChild;//IE678 support
        };
    }

11.document.getElementsByClassName problem

window.onload = function() {
           // Encapsulate your own class name
            function getClass(classname)
            {
                //Judge whether it is supported
                if(document.getElementsByClassName)
                {
                    return document.getElementsByClassName(classname);
                }
                var arr = []; //Used to return an array
                var dom = document.getElementsByTagName("*");
                for(var i=0;i<dom.length;i++)  // Traverse all boxes
                {
                    var txtarr = dom[i].className.split(" "); // Split the class name and convert it to an array
                    //  ["demo","test"];
                    for(var j=0;j<txtarr.length;j++)  // Traverses an array divided by class names
                    {
                        if(txtarr[j] == classname)
                        {
                            arr.push(dom[i]); // What we want is div
                        }
                    }
                }
                return arr;
            }
        }

12. Get the non line style value of the element:

 function getStyle(obj,attr) {  //  Whose attributes
        if(obj.currentStyle)  // ie et al
        {
            return obj.currentStyle[attr];  // Returns a property passed in
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c browser
        }
    }

13. Prevent the event from spreading:

<script>
    var btn = document.getElementById("btn");
    document.onclick = function() {
        alert("Click on the blank space")
    }
    btn.onclick = function(event) {
        alert("Click the button")
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3c standard
        }
        else
        {
            event.cancelBubble = true;  // Ie 678 IE browser
        }
    }
</script>

14.js block default events

document.onclick=function(e){
    var e=e||window.event;
    if (e.preventDefault) {
        e.preventDefault();//W3C standard
    }else{
        e.returnValue='false';//IE..
    }
}

15. Mouse wheel events

//Scroll events in Firefox
document.addEventListener("DOMMouseScroll",function(event){
    alert(event.detail);//- 3 for forward roll and 3 for backward roll
},false)
//Roller events in non Firefox
document.onmousewheel=function(event){
    alert(event.detail);//Forward roll: 120, backward roll: - 120
}

16. Set listening events

 function addEvent(obj,type,fn){//Add event listening. The three parameters are object, event type and event handling function. The default value is false
    if (obj.addEventListener) {
        obj.addEventListener(type,fn,false);//Non IE
    } else{
        obj.attachEvent('on'+type,fn);//ie, on has been added here. Be careful not to add it again when passing parameters
    };
}
function removeEvent(obj,type,fn){//Delete event listening
    if (obj.removeEventListener) {
        obj.removeEventListener(type,fn,false);//Non IE
    } else{
        obj.detachEvent('on'+type,fn);//ie, on has been added here. Be careful not to add it again when passing parameters
    };
}

In IE:

document.body.clientWidth ==> BODY Object width 
document.body.clientHeight ==> BODY Object height 
document.documentElement.clientWidth ==> Visible area width 
document.documentElement.clientHeight ==> Height of visible area 
FireFox Medium: 
document.body.clientWidth ==> BODY Object width 
document.body.clientHeight ==> BODY Object height 
document.documentElement.clientWidth ==> Visible area width 
document.documentElement.clientHeight ==> Height of visible area 
Opera Medium: 
document.body.clientWidth ==> Visible area width 
document.body.clientHeight ==> Height of visible area 
document.documentElement.clientWidth ==> Page object width (i.e BODY Object width plus Margin (width) 
document.documentElement.clientHeight ==> Page object height (i.e BODY Object height plus Margin High) 
No definition W3C Standard, then 
IE Is: 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox Is: 
document.documentElement.clientWidth ==> Page object width (i.e BODY Object width plus Margin wide) 
document.documentElement.clientHeight ==> Page object height (i.e BODY Object height plus Margin High) 
Opera Is: 
document.documentElement.clientWidth ==> Page object width (i.e BODY Object width plus Margin (width) 
document.documentElement.clientHeight ==> Page object height (i.e BODY Object height plus Margin High) 


Width of visible area of web page: document.body.clientWidth 
Page visible area height: document.body.clientHeight 
Width of visible area of web page: document.body.offsetWidth (Including the width of the sideline) 
Page visible area height: document.body.offsetHeight (Including the height of the sideline) 
Full text width of page body: document.body.scrollWidth 
Full text height of web page: document.body.scrollHeight 
The height of the page being rolled out: document.body.scrollTop 
The left side of the page being rolled out: document.body.scrollLeft 
On the body of the page: window.screenTop 
Page body left: window.screenLeft 
High screen resolution: window.screen.height 
Width of screen resolution: window.screen.width 
Screen available workspace height: window.screen.availHeight 
Screen available workspace width: window.screen.availWidth 

HTML Precise positioning:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: Gets the scroll height of the object. 
scrollLeft:Sets or gets the distance between the left boundary of the object and the leftmost end of the currently visible content in the window 
scrollTop:Sets or gets the distance between the top of the object and the top of the visible content in the window 
scrollWidth:Gets the scroll width of the object 
offsetHeight:Gets the coordinates of the object relative to the layout or by the parent offsetParent Property specifies the height of the parent coordinate 
offsetLeft:Gets the object relative to the layout or by offsetParent Property specifies the calculated left position of the parent coordinate 
offsetTop:Gets the object relative to the layout or by offsetTop Property specifies the calculated top position of the parent coordinate 
event.clientX Horizontal coordinates relative to the document 
event.clientY Vertical coordinates relative to the document 
event.offsetX Horizontal coordinates relative to the container 
event.offsetY Vertical coordinates relative to the container 
document.documentElement.scrollTop Value of vertical scrolling 
event.clientX+document.documentElement.scrollTop Horizontal coordinates relative to the document+Amount of vertical scrolling 
<script>
    function client() {
        if(window.innerWidth != null)  // ie9 + latest browser
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if(document.compatMode === "CSS1Compat")  // Standard browser
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return {   // Weird browser
            width: document.body.clientWidth,
            height: document.body.clientHeight

        }
    }

    document.write(client().width);

Tags: Javascript Front-end html5 html

Posted on Thu, 23 Sep 2021 03:27:55 -0400 by Ambush Commander