文章/答案/技术大牛

发布

社区首页 >专栏 >ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

小白哥哥

发布于 2018-03-07 03:28:39

1.2K00

代码可运行

文章被收录于专栏：技术小讲堂技术小讲堂

运行总次数：0

代码可运行

目前，常见的浏览器IE（6，8，9），chrome，firefox，safari等，还有国内的一些曾经靠恐吓用户来提高使用率的某浏览器（河蟹社会），这些浏览器对于Javascript的语言特性实现大致是相同的，但是对于DOM操作方式却大相径庭，所以我们通常需要自己对不同浏览器对于DOM的操作方式进行分而治之，或者我们往往是使用一些Javascript框架提供的兼容功能，当然也有我们的Microsoft AJAX Library

判断浏览器的类型和版本

浏览器兼容层的优势在于，我们可以使用同样的编码方式，让相同的代码在不同浏览器下的表现统一，因为在这个兼容层内部，分别实现了或者规避了一些浏览器的不同的实现，但是不同的浏览器的某些差异难以使用框架来保证，因此提供显式的判断浏览器的类型和版本是必不可少的

Sys.Browser

通过windows.navigator.userAgent来判断
Sys.Brower.agent表示浏览器类型（可能的值InternetExplorer/FireFox/Safari/Opera）
Sys.Brower.hadDebuggerStatement：是否支持debugger命令
Sys.Brower.name:浏览器名称
Sys.Brower.version:浏览器版本

一个通过浏览器类型获得显示窗口的大小的示例

创建一个aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetClientBoundsByBrowerType.aspx.cs" Inherits="Demo11_GetClientBoundsByBrowerType" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <script language="javascript" type="text/javascript">
            document.write(window.navigator.userAgent);//打印浏览器信息
        </script>
        
        <hr />
        
        <script language="javascript" type="text/javascript">
            document.write("Has Debugger Statement:" + Sys.Browser.hasDebuggerStatement + "<hr/>");//是否支持debugger
            document.write("Name:" + Sys.Browser.name + "<hr/>");//浏览器名称
            document.write("Version:"+Sys.Browser.version);//浏览器版本
        </script>
        
        <script language="javascript" type="text/javascript">
            function getClientBounds() {
                var clientWidth;
                var clientHeight;
                switch (Sys.Browser.agent) {//判断浏览器类型
                    case Sys.Browser.InternetExplorer: //如果浏览器是InternetExplorer
                        clientWidth = document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
                        clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
                        break;
                    case Sys.Browser.Safari: //如果浏览器是Safari
                        clientWidth = window.innerWidth;
                        clientHeight = window.innerHeight;
                        break;
                    case Sys.Browser.Opera: //如果浏览器是Opera
                        clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                        clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                        break;
                    case Sys.Browser.Firefox: //如果浏览器是Firefox
                        clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                        clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                        break;
                }
                return { width: clientWidth, height: clientHeight };
            }
        </script>
        <hr />
        <div id="clientBounds"></div>
        <script language="javascript" type="text/javascript">
            window.onresize = function() {//当浏览器的大小改变的时候调用
            var bounds = getClientBounds();
                $get("clientBounds").innerHTML = String.format("Width:{0}<br/>Height:{1}",bounds.width,bounds.height);
            }
        </script>
    </form>
</body>
</html>

我这里使用的是IE8，chrome14.0和firefox6进行测试，得到的结果如下所示

IE8

chrome14.0

firefox6

这里我要提一下，其实Microsoft AJAX Library是没有直接的提供chrome的支持的，我这里使用它进行测试，完全是因为我这里只装了这三种浏览器，在chrome下，很多东西得出的结果是不正确的，只是让大家明白这里的不同，不要太多关注与它对chrome的支持

同样，这里我们也可以看到，在取到浏览器的尺寸的时候，各种浏览器的取得方法，是完全不相同的，这就是我们前面提到的对于DOM操作方式却大相径庭

针对DOM元素的兼容操作

Sys.UI.DomElement静态类中
$get=.getElementById=function(id,parent);//只是效果，并不等同
Sys.UI.DomElement.addCssClass=function(element,className);
Sys.UI.DomElement.removeCssClass=function(element.className);
Sys.UI.DomElement.containsCssClass=function(element,className);//判断元素下是否有这个className类
Sys.UI.DomElement.toggleCssClass=function(element,className);//如果元素有className，则去除，如果没有则添加
可以自行添加缩写方法：eg:$addCss=Sys.UI.DomElement.addCssClass
Sys.UI.DomElement.getLocation=function(element)//返回Sys.UI.DomElement类型对象的位置
Sys.UI.DomElement.setLocation=funcation(element,x,y)
Sys.UI.DomElement.getBounds=funcation(element)//得到元素的大小和位置返回Sys.UI.Bounds

一个针对DOM元素的兼容操作的示例

创建一个名为DomElementOperations.aspx的页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DomElementOperations.aspx.cs" Inherits="Demo11_DomElementOperations" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .red{color:Red;}
        .large{font-size:xx-large;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <script language="javascript" type="text/javascript">
            //自行添加的缩写方法
            $addCss = Sys.UI.DomElement.addCssClass;
            $removeCss = Sys.UI.DomElement.removeCssClass;
            $containCss = Sys.UI.DomElement.containsCssClass;
            $toggleCss = Sys.UI.DomElement.toggleCssClass;
        </script>
        
        <input type="checkbox" id="inputElement" /><%--这里我们使用了两个相同的id--%>
        <div id="someContainer">
            <input type="text" id="inputElement" /><%--这里我们使用了两个相同的id，这个元素包裹在了一个DIV里--%>
        </div>
        <script language="javascript" type="text/javascript">
            document.write($get("inputElement").type + "<br/>");//这里将会打印checkbox，因为开始找到的是一个checkbox
            document.write($get("inputElement", $get("someContainer")).type + "<br/>"); //这里指定了将在id为someContainer的元素里找，所以是一个input
        </script>
        <hr />
        <div id="someText">
            Xiaoyaojian
        </div>
        <input type="button" value="Add Red" onclick="$addCss($get('someText'),'red')" /><%--添加一个red样式--%>
        <input type="button" value="Remove Red" onclick="$removeCss($get('someText'),'red')" /><%--去除一个red样式--%>
        <input type="button" value="Toggle Large" onclick="$toggleCss($get('someText'),'large')" /><%--如有有large这个元素，则去除，如果没有则添加--%>
        <input type="button" value="Container Large" onclick="alert($containCss($get('someText'),'large'))" /><%--判断元素上是否有large这个样式--%>
        
        <hr />
        
        <div id="anElement" style="background-color:Red; color:White; position:absolute; overflow:hidden;">
            Hello World
        </div>
        
        <script language="javascript" type="text/javascript">
            function setRandomLocation() {
                var left = Math.floor(Math.random() * 100);
                var top = Math.floor(Math.random() * 100);
                Sys.UI.DomElement.setLocation($get("anElement"), left, top);//设置位置，他相对左上角的位置是随机产生的
            }

            function setRandomSize() {
                $get("anElement").style.width = Math.floor(Math.random() * 100 + 50) + "px"; //设置元素的宽
                $get("anElement").style.height = Math.floor(Math.random() * 100 + 50) + "px";//设置元素的高
            }
            
            function showLocation() {
                var point = Sys.UI.DomElement.getLocation($get("anElement"));//显示元素相对浏览器左上角位置
                alert(String.format("x:{0},y:{1}",point.x,point.y));
            }

            function showBounds() {//显示元素的宽高（大小）和相对浏览器左上角的位置
                var point = Sys.UI.DomElement.getBounds($get("anElement"));
                alert(String.format("x:{0},y:{1},width:{2},height:{3}", point.x, point.y,point.width,point.height));
            }
        </script>
        
        <input type="button" value="Set Location" onclick="setRandomLocation()" />
        <input type="button" value="Set Size" onclick="setRandomSize()" />
        <input type="button" value="Show Location" onclick="showLocation()" />
        <input type="button" value="Show Bound" onclick="showBounds()" />
    </form>
</body>
</html>

在页面的代码注释里，我自认为已经写的足够的清楚，所以我在这里就不多做解释

针对DOM事件的兼容操作

出现的原因

添加和删除event handler的方法不同
获取Event对象的方法不同
Event对象的方法和属性不同
…等等
因为种种原因，微软提供了一套“第三种形式的”DOM事件操作

提供的操作

添加Event Handler:$addHandler(element,eventName,handler);//这里的事件名没有“on”
添加Event Handler$addHandlers(element,events,owner);//events为一个存放Event Handler的字典，Owner为执行EventHandler的上下文对象
去除Event Handler ：$removeHandler(element,eventName,handler);
去除所有的Event Handler: $clearHandlers(element);
Event Handler签名：on***(event);//event为一个Sys.UI.DomEvent类的对象
Sys.UI.DomEvent.preventDefault();//组织事件的默认行为
Sys.UI.DomEvent..stopPropagation();//阻断事件的向上传递
Sys.UI.DomEvent.altKey/ctrlKey/shiftKey;//触发事件时用户是否按着Alt/Ctrl/Shift键
Sys.UI.DomEvent.type:一个表示事件类型的字符串
Sys.UI.DomEvent.target：触发事件的DOM元素
Sys.UI.DomEvent.button:一个Sys.UI.MouseButton的枚举
Sys.UI.DomEvent.keyCode:一个表示当前按键的整数值，可以和Sys,UI,Key枚举的项找到对应关系
Sys.UI.DomEvent.clientX/clientY:鼠标在document可视范围内的位置（和滚动条状态无关）
Sys.UI.DomEvent.screenX/screenY：鼠标在屏幕中的位置
Sys.UI.DomEvent.offsetX/offsetY:鼠标在触发事件的对象中的相对位置
Sys.UI.DomEvent.rawEvent：浏览器原生事件对象

一个针对DOM事件的兼容操作的示例

创建一个asp页面，我们如果没有这个浏览器兼容层的情况下，我们如果为一个按钮在javascript中为一个按钮添加一个事件，则需要如下代码来兼容不同的浏览器

<input type="button" value="Button" id="aButton" onclick="eventHandler(event)" />
        
        <script language="javascript" type="text/javascript">
            var button = document.getElementById("aButton");

            //只对IE有效果
            button.attachEvent("onclick", eventHandler);
            button.detachEvent("onclick", eventHandler);

            //只对firefox有效果
            button.addEventListener("onclick", eventHandler);
            button.removeEventListener("onclick", eventHandler);

            //兼容两种浏览器
            if (button.attachEvent) {
                button.attachEvent("onclick", eventHandler);
            }
            else {
                button.addEventListener("onclick", eventHandler);
            }
        </script>

而在我们有了这个浏览器兼容层的情况下，我们只需要做如下的操作

在页面中首先添加一个ScriptManager

<div style="width:300px; height:300px; background-color:Red" id="mouseEvent">
        </div>
        
        <script language="javascript" type="text/javascript">
            function onMouseDown(e) {
                $get("displayMouseEvent").innerHTML = String.format(
                    "altKey:{0}<br/>"+
                    "ctrlKey:{1}<br/>"+
                    "shiftKey:{2}<br/>"+
                    "clientX & Y:({3},{4})<br/>"+
                    "screenX & Y:({5},{6})<br/>"+
                    "offsetX & Y:({7},{8})<br/>" +
                    "button:{9}",
                    e.altKey,e.ctrlKey,e.shiftKey,//是否按着Alt/Ctrl/Shift这几个键
                    e.clientX,e.clientY,//可视范围内的位置
                    e.screenX,e.screenY,//相对于屏幕的位置
                    e.offsetX, e.offsetY,//相对于元素内部的位置
                    Sys.UI.MouseButton.toString(e.button));//表示按下的按键，左/右/中（按下滚轮）
            }

            $addHandler($get("mouseEvent"), "mousedown", onMouseDown); //为上面的div添加一个mousedown事件,触发这个事件，调用onMouseDown方法
        </script>
        
        <div id="displayMouseEvent"></div><%--要显示信息的DIV—%>