+发表新主题
查看: 1530|回复: 0

[代码片段] BOM 常用对象（一）

[复制链接]

[代码片段] BOM 常用对象（一）

[复制链接]
殷三姗 发表于 2016-1-26 22:10:17 浏览:  1530 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
今天学习BOM常用对象:

1. BOM常用对象：navigator

       navigator：保存浏览器软件属性和配置的对象

         1.判断cookie：cookieEnabled  启用了，返回true；否则返回false

              cookie：在客户端硬盘持久存储某个网站当前用户个人信息的文件

                    访问网站时，由网站或客户端浏览器创建，都保存在客户端硬盘

                    请求该网站时，随request一起自动发到服务器

                    服务器接到cookie，取出其中的值进行验证

                    一个网站创建的cookie，只能访问自己网站时使用

           优点：持久存储个人数据，提高用户体验。

           缺点：泄露个人信息。

   例如:

  2.         <!DOCTYPE html >

  3. <head>

  4.   <title> new document </title>

  5.   <meta charset="utf-8"/>

  6.   <script>

  7.   //判断浏览器是否启用kooie

  8.   if(navigator.cookieEnabled){

  9. document.write("cookie已启用，请妥善保存个人信息");

  10. }else{

  11. document.write("已禁用cookie，保存密码功能无法使用");

  12. }

  13.   </script>

  14. </head>



  16. <body>

  17.   

  18. </body>

  19. </html>
复制代码
页面效果如下:

    220402huuzpweup0zb0cu8.png

        2.判断或查找插件：plugins，返回所有插件对象的集合

例如:查看浏览器插件信息：


  2. <!DOCTYPE html >

  3. <head>

  4.   <title> new document </title>

  5.   <meta charset="utf-8"/>

  6.   <script>

  7.   //查看浏览器插件信息

  8.      console.log(navigator.plugins);

  9.   </script>

  10. </head>

  11. </html>
复制代码
页面效果:

    220402huuzpweup0zb0cu8.png

        3.判断是否包含某一个插件：遍历插件集合，判断每个插件的name属性

例如:判断浏览器是否安装了QQMUSIC插件：


  2. <!DOCTYPE html >

  3. <head>

  4. <title> new document </title>

  5. <meta charset="utf-8"/>

  6. <script>

  7. //判断浏览器是否包含QQMusic插件

  8. var has=false;

  9. for(var i=0;i<navigator.plugins.length;i++){

  10. if(navigator.plugins[i].name=="QQMusic"){

  11. has=true;

  12. }

  13. }

  14. document.write(has?"支持QQMusic":"未安装QQMusic插件");

  15. </script>

  16. </head>



  18. <body>

  19. </body>

  20. </html>
复制代码
  页面效果:

   220402huuzpweup0zb0cu8.png



        4.userAgent：获得浏览器基本信息(名称，版本)的字符串

       例如:查看浏览器基本信息:


  2. <!DOCTYPE html >

  3. <head>

  4.   <title> new document </title>

  5.   <meta charset="utf-8"/>

  6.   <script>

  7.   //查看浏览器基本信息

  8.   document.write(navigator.userAgent);

  9.   </script>

  10. </head>

  11. </html>
复制代码
页面效果如下:

220402huuzpweup0zb0cu8.png

例如:判断当前正在使用的浏览器类型:


  2. <!DOCTYPE html >

  3. <head>

  4.   <title> new document </title>

  5.   <meta charset="utf-8"/>

  6.   <script>

  7.   //判断当前正在使用的浏览器类型

  8.   var agent=navigator.userAgent;

  9. var browser="unknown";

  10. if(agent.indexOf("MSIE")!=-1){

  11. browser="IE";

  12. }else if(agent.indexOf("Firefox")!=-1){

  13. browser="Firefox";

  14. }else if(agent.indexOf("OPR")!=-1){

  15. browser="Opera";

  16. }else if(agent.indexOf("Chrome")!=-1){

  17. browser="Chrome";

  18. }else if(agent.indexOf("Safari")!=-1){

  19. browser="Safari";

  20. }else if(agent.indexOf("Trident")!=-1){

  21. browser="IE10+";

  22. }

  23. document.write("你正在使用："+browser+" 浏览器");



  25. if(browser=="Opera"){

  26. var i=agent.indexOf("OPR")+3+1;

  27. }else if(browser=="IE10+"){

  28. var i=agent.indexOf("rv")+2+1;

  29. }else{

  30. var i=agent.indexOf(browser)+browser.length+1;

  31. }

  32. var version=parseFloat(agent.slice(i,i+3));

  33. document.write("版本："+version);

  34.   </script>

  35. </head>

  36. </html>
复制代码
页面效果如下:

220402huuzpweup0zb0cu8.png
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

殷三姗
技冠群雄

34

主题

36

帖子

106

积分

技冠群雄

Rank: 6Rank: 6

积分
106
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网