兼容低版本浏览器的一些方法

Posted Go web

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容低版本浏览器的一些方法相关的知识，希望对你有一定的参考价值。

  • 页面滚动的兼容方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

</body>
</html>
<script>

    window.onscroll = function () {
        document.title = scroll().top;
    }

    /*正常浏览器（除了ie678之外的浏览器）
     window.pageYOffset
     已经声明DTD（标准模式）
     document.documentElement.scrollTop
     未声明 DTD（怪异模式）
     document.body.scrollTop*/



    //这个方法可以给调用者提供 页面被卷去的top值和left值
    function scroll() {
        if (window.pageYOffset != null) {
            return {
                "top": window.pageYOffset,
                "left": window.pageXOffset
            };
        } else if (document.compatMode == "CSS1Compat") {
            //说明是标准模式 有DTD
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            };
        } else {
            return {
                "top": document.body.scrollTop,
                "left": document.body.scrollLeft
            };
        }
    }

</script>

  • 网页可视区client方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>

    window.onresize = function () {
        document.title = client().width;
    }

    /*正常浏览器（包括IE9+）
     window.innerWidth
     标准模式（包括IE9-）
     document.documentElement.clientWidth
     怪异模式
     document.body.clientWidth*/

    //返回一个对象 如果用可视区的宽度 就.width 如果用高度就 .height
    function client() {
        if (window.innerWidth != null) {
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode == "CSS1Compat") {
            //标准模式
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        } else {
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }


</script>

  •  兼容ie6、7、8获取鼠标的坐标方法

function (event) {
        var event = event || window.event;

        //event.clientX//相对于客户端的位置
        //event.pageX//相对于页面的位置
        //event.screenX//相对于屏幕的位置

        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    }

  •  阻止事件冒泡

var event = event || window.event;
        if (event && event.stopPropagation) {//短路表达式
            //说明是正常浏览器
            event.stopPropagation();
        } else {
        //兼容ie678
            event.cancelBubble = true;
        }

  •  事件目标兼容性　

　　targetId（排除事件触发案例）

返回当前事件对象的id

火狐谷歌等 event.target.id

IE678      event.srcElement.id

 var targetId = event.target ? event.target.id : event.srcElement.id;

 

 

 

以上是关于兼容低版本浏览器的一些方法的主要内容，如果未能解决你的问题，请参考以下文章

低版本IE浏览器不兼容placeholder解决方法

H5兼容性问题

兼容IE低版本的文件上传解决方案

让低版本IE兼容H5+CSS3新特性的方法

jquery不兼容低版本ie浏览器怎么解决?

Vue2兼容低版本浏览器