来自 Web前端 2020-04-29 15:34 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

JS 获取有关客户荧屏消息,从前用网络现有的代

时间: 2019-12-20阅读: 94标签: 微信

作者:nuysoft/高云 QQ:47214707 EMail:[email protected]

JS Window-浏览器对象模型

  • 浏览器对象模型(BOM)使JS有能力与浏览器对话
  • 由于现代浏览器几乎实现了JS交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。

之前用网上现成的代码发现有很多浏览器被判别成QQ,像这样:

声明:本文为原创文章,如需转载,请注明来源并保留原文链接。 

Window对象

  • 所有浏览器都支持Window对象,它表示浏览器窗口。

  • 所有JS全局对象、函数以及变量均会自动成为window对象的成员。

  • 全局变量是window对象的属性

  • 全局函数是window对象的方法

  • HTML DOM的document也是window对象的属性之一

         window.document.getElementById("header");
    
function is_weixn_qq(){var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") {return "weixin";} else if (ua.match(/QQ/i) == "qq") {return "QQ"; }return false;}

读读写写,不对的地方请告诉我,多多交流共同进步 

Window尺寸

  • 有三种方法可以确定浏览器窗口的尺寸

  • 对于IE、Chrome、Firefox、Opera、Safari

    • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
  • 对于IE8、7、6、5

    • document.documentElement.clientHeight
    • document.documentElement.clientWidth
  • 或者

    • document.body.clientHeight
    • document.body.clientWidth
  • 实例:获取浏览器高度宽度(涵盖所有浏览器)

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

原因是一些手机浏览器navigator信息中会包含qqbrowser字符,因此被错判为QQ环境,通过分析不同环境下的navigator信息,微信和QQ环境下会包含如下的特征字符串:

澳门三合彩票,6.浏览器测试Support

其他Window方法

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口
MicroMessenger/xxxqq/xxx(xxx)疑似是版本号?

浏览器之间的差异太让人头大了,本章也仅仅介绍jQuery实现浏览器兼容的基本思路,以及封装了种种差异后的接口。$.support中的众多属性和实现方式,超出了本文的写作初衷(一个头两个大啊),有兴趣的可以自行搜索、翻阅相关的资料。

JS 获取有关用户屏幕信息

  • window.screen 对象包含有关用户屏幕的信息
  • window.screen 对象在编写时可以不使用window这个前缀
    • screen.avaliWidth - 可用的屏幕宽度
    • screen.avaliHeight - 可用的屏幕高度

我们将原来代码中的正则表达式改为下面这样就行了:

兼容各种主流浏览器是JavaScript库的必修课之一,一般来说检测浏览器有两种方法:

Window Screen 可用宽度

  • screen.avaliWidth 属性返回访问者屏幕的宽度,以像素为单位,减去界面特性,比如窗口任务栏这些。
   <script>
document.write("可用宽度: " + screen.availWidth);
</script>
var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/[0-9]/i)){ return "weixin";}if(ua.match(/QQ/[0-9]/i)){ return "QQ";}

l  检测navigator.userAgent,用户代理检测法

Window Screen 可用高度

  • screen.avaliHeight 属性返回访问者屏幕的高度,以像素为单位,减去界面特性,比如窗口任务栏这些。
   <script>
document.write("可用高度: " + screen.availHeight);
</script>

扩展:为什么浏览器navigator中会出现其他浏览器的标识呢?

l  检测浏览器的功能特性,即功能特性检测法

JS Window Location对象

  • window.location 对象用于获得当前页面的地址URL,并把浏览器重定向到新的界面。编写时可不写window前缀。

  • location的一些实例

    • location.hostname 返回web主机的域名
    • location.pathname 返回当前页面的路径和文件名
    • location.port 返回web主机的端口(80或443)
    • location.protocol 返回所使用的web协议(

原因是以前不同的浏览器对特性的支持情况不同,因此在程序编写的时候开发人员会通过判断浏览器的类型,来决定网页要不要显示相关特性。而随着浏览器的发展,浏览器支持的特性越来越全,因此,为了告诉以前的网页“我是支持这些特性的”,浏览器开发者会在navigator字段添加其他浏览器的标签,从而避过页面开发人员的检测。有点像两边不断防御,不断破解的感觉,导致现在网上一些老的代码没法用,只能根据当前的实际情况自己编写代码。

6.1        用户代理检测法

window.navigator是Navigator对象,包含了正在使用的浏览器的信息:

属性

说明

appCodeName

代码名

appName

名称

appVersion

平台和版本信息

platform

操作系统和硬件平台

userAgent

用于HTTP请求的用户代理头

再看看navigator在IE和火狐下的测试:

l  IE8

属性

IE8

appCodeName

Mozilla

appName

Microsoft Internet Explorer

appVersion

4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

platform

Win32

userAgent

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

l  Firefox

属性

Firefox

appCodeName

Mozilla

appName

Netscape

appVersion

5.0 (Windows)

platform

Win32

userAgent

Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0

 

测试结果让人纠结,既然。。。,Chrome、Safari、Opera就不测了!

不过,我们也发现userAgent似乎包含了较全的信息。浏览器在发起HTTP请求时,会把userAgent的信息作为请求头中User-Agent的值。服务器需要的话可以据此检测浏览器类型,对响应的内容进行适配,比如适配各种型号的手机浏览器。

jQuery就是根据userAgent属性来检测浏览器的类型,并提供了$.browser对象,通过$.browser,我们可以获取当前浏览器的类型和版本。

$.browser包含四种最流行的浏览器标记(IE,Mozilla,Webkit, Opera)和版本,对应的有效标记有:

l  webkit

l  safari(deprecated)

l  opera

l  msie

l  mozilla

$.browser不需等待$(document).ready就可以获取。使用示例:

$.browser.msie/mozilla/webkit/opera

$.browser.version

由于$.browser基于navigator.userAgent检测浏览器类型,很容易被用户和浏览器欺骗,并且缺乏灵活性和不够全面。因此最好避免编写基于特定浏览器的代码。相对于$.browser,$.support针对浏览器特定特性的检测则更为有效。

从API文档中可以看到,未来jQuery.browser可能会移到一个插件中

$.browser的实现代码如下:

// 用户代理检测正则表达式定义

var...

rwebkit = /(webkit)[ /]([w.]+)/,

ropera = /(opera)(?:.*version)?[ /]([w.]+)/,

rmsie = /(msie) ([w.]+)/,

rmozilla = /(mozilla)(?:.*? rv:([w.]+))?/,

// 到处都是把属性取出来,作为局部变量使用,可以减少跨作用域查询,提高性能

userAgent = navigator.userAgent,

// 用户代理匹配结果

browserMatch,

// 实际执行匹配的函数

uaMatch: function( ua ) {

    ua = ua.toLowerCase();

    // 依次匹配各浏览器

    varmatch = rwebkit.exec( ua ) ||

       ropera.exec( ua ) ||

       rmsie.exec( ua ) ||

       ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||

       [];

    // match[1] || "" :match[1]为false(空字符串、null、undefined、0等)时,默认为""

    // match[2] || "0" :match[2]为false(空字符串、null、undefined、0等)时,默认为"0"

    return{ browser: match[1] || "", version: match[2] || "0"};},

// 将测试结果保存至jQuery.browser

browserMatch = jQuery.uaMatch( userAgent );

if( browserMatch.browser ) {

    jQuery.browser[ browserMatch.browser ] = true;

    jQuery.browser.version = browserMatch.version;

}

// 不推荐使用safari标记,用webkit代替

if( jQuery.browser.webkit ) {

    jQuery.browser.safari = true;

}

获取URL(href)

  • location.href 属性返回当前页面的url
<script>
//输出当前页面的URL
document.write(location.href);
</script>
//输出: http://www.runoob.com/js/js-window-location.html

6.2        功能特性检测法

即根据浏览器是否支持某项特定的功能特性,来决定程序的执行分支,这种方法不考虑浏览器类型和版本,也不考虑浏览器升级带来的变化,更加安全、灵活,同时减少了维护工作,因此成为了当下主流的检测方法。例如绑定load事件的代码:

// 兼容事件模型,通过检测浏览器的功能特性,而非嗅探浏览器

if( document.addEventListener ) {

    // Use the handy event callback

    // 使用较快的加载完毕事件

    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false);

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.addEventListener( "load", jQuery.ready, false);

 

// If IE event model is used

// 如果是IE事件模型

} elseif( document.attachEvent ) {

    // ensure firing before onload,

    // maybe late but safe also for iframes

    // 确保在onload之前触发onreadystatechange,可能慢一些但是对iframes更安全

    document.attachEvent( "onreadystatechange", DOMContentLoaded );

 

    // A fallback to window.onload, that will always work

    // 注册window.onload回调函数

    window.attachEvent( "onload", jQuery.ready );

 

    // If IE and not a frame

    // continually check to see if the document is ready

    vartoplevel = false;

 

    try{

       toplevel = window.frameElement == null;

    } catch(e) {}

 

    if( document.documentElement.doScroll && toplevel ) {

       doScrollCheck();

    }

}

获取URL路径名(pathname)

  • location.pathname 属性返回URL的路径名
<script>
document.write(location.pathname);
</script>
//输出: /js/js-window-location.html

本文由澳门三合彩票发布于Web前端,转载请注明出处:JS 获取有关客户荧屏消息,从前用网络现有的代

关键词: