JS原生系列-BOM篇

我们已经学习了DOM,文档对象模型,我们的主要处理都是在这个模型基础上工作的,同样我们还有可能对浏览器进行一些操作,如:

1.检测浏览器的类型和版本

2.检测是pc还是移动设备

3.根据条件,进行页面的自动跳转

4.打开一个新的窗口,存放指定链接

5.关闭窗口

6.返回到上一个页面

7.获取地址栏信息,进行处理

等...

我们来学习,并且逐个实现上面的处理

(一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息。

代表屏幕对象,获取屏幕信息,并不是浏览器

availHeight:返回显示屏幕的高度

availWidth:返回显示屏幕的宽度

colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

 height:返回屏幕区域的实际高度

 width:返回屏幕区域的实际宽度

js:

alert("返回显示屏幕的高度"+screen.availHeight)
alert("返回显示屏幕的宽度"+screen.availWidth)
alert("返回目标设备或缓冲器上的调色板的比特深度"+screen.colorDepth)   
alert("返回屏幕区域的实际高度"+screen.height)   
alert("返回屏幕区域的实际宽度"+screen.width)

screen对象,我们用的很少,我们都是对浏览器的处理,再说客户的屏幕差别很大,我们做了解!

(二)Window对象,Window 对象表示一个浏览器窗口或一个框架。

window对象,是global对象,全局对象,我们的很多对象都是直接间接挂在在window下面

我们看下面的代码,并且分析:

var aa="123";
var bb=function(){alert(aa)};
alert(aa);
bb();

上面是我们最常用的写法,其实这些全局的变量和方法都是挂载在window下面的,window可以缺省,当然有些特殊的不可以省略

我们改成如下代码:

var aa="123";
var bb=function(){alert(aa)};
alert(window.aa)
window.alert(aa);
window.bb();

全局aa变量通过window.可以访问到,bb方法也可以,同样alert方法也可以通过window访问到,

js为了给我省略这个冗余代码,我们通过简写缺省就可以了!不过我们心里却要记住是挂在在window下面的,可以通过它就调用

我们下面看window的属性和方法:

window.open(‘page.html‘, ‘newwindow‘, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘)   新窗口的打开

参数解释:
      window.open 弹出新窗口的命令;
  ‘page.html‘ 弹出窗口的文件名;
  ‘newwindow‘ 弹出窗口的名字(不是文件名),非必须,可用空‘‘代替;
  height=100 窗口高度;
  width=400 窗口宽度;
  top=0 窗口距离屏幕上方的象素值;
  left=0 窗口距离屏幕左侧的象素值;
  toolbar=no 是否显示工具栏,yes为显示;
  menubar,scrollbars 表示菜单栏和滚动栏。
  resizable=no 是否允许改变窗口大小,yes为允许;
  location=no 是否显示地址栏,yes为允许;
  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;window.close()关闭当前窗口

window.moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。

window.moveBy(x,y) 方法可相对窗口的当前坐标把它移动指定的像素。

window.resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。

window.resizeBy(x,y) 方法用于根据指定的像素来调整窗口的大小。

window.status= "php点点通";改变状态栏显示的基本信息。

window.defaultStatus = "php点点通";改变状态栏显示的基本信息。

我们下面多一些功能代码处理:

新窗口打开:

window.open("https://www.baidu.com/","demo",‘height=400‘, ‘width=400‘)

窗口关闭:

<input type="button" id="close" value="关闭" />
var wclose=document.getElementById("close");
wclose.onclick=function(){window.close();};

open方法与close是配对使用,只有open打开的窗口才可以运用close方法;

moveBy(x,y)这些操作窗口的方法都是对open打开的窗口有效

下面的就是我们dom提到间隔执行函数和一次延时函数,也是直接在window下面的,我们不做解释和分析了

setTimeout(epress,time) 方法用于在指定的毫秒数后调用函数或计算表达式。

clearTimeout(timeID)停止已经启动的定时器

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

clearInterval()停止使用setInterval() 方法

(三)Window.Navigator对象,包含的属性描述了正在使用的浏览器

navigator对象是window的下一级对象,也可以看做是window的属性,调用时window可省略

我们就不做太多解释,navigator包含了所有当前浏览器的信息

appCodeName  返回浏览器的代码名。
appMinorVersion  返回浏览器的次级版本。
appName  返回浏览器的名称。
appVersion  返回浏览器的平台和版本信息。
browserLanguage  返回当前浏览器的语言。
cookieEnabled  返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass  返回浏览器系统的 CPU 等级。
onLine  返回指明系统是否处于脱机模式的布尔值。
platform  返回运行浏览器的操作系统平台。
systemLanguage  返回 OS 使用的默认语言。
userAgent  返回由客户机发送服务器的 user-agent 头部的值。
userLanguage  返回 OS 的自然语言设置。

我们代码一次演示输出:

alert(navigator.appCodeName)
alert(navigator.appMinorVersion)
alert(navigator.appName)
alert(navigator.appVersion)
alert(navigator.browserLanguage)
alert(navigator.cookieEnabled)
alert(navigator.cpuClass)
alert(navigator.onLine)
alert(navigator.platform)
alert(navigator.systemLanguage)
alert(navigator.userAgent)
alert(navigator.userLanguage)

我们从中也可以看到很多我们有用的信息属性,浏览器的名称,运行平台,cookie启用等

(四)Window.History对象,其实就是来保存浏览器历史记录信息。

history对象是window的下一级对象,也可以看做是window的属性,调用时window可省略

length,返回浏览器历史列表中的 URL 数量。

back()加载 history 列表中的前一个 URL。

forward()加载 history 列表中的下一个 URL。

go()加载 history 列表中的某个具体页面。

如常见的返回上一页:History.go(-1)和history.back()

(五)Window.Location对象,Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

hash:设置或返回从井号 (#) 开始的 URL(锚)。

host:设置或返回主机名和当前 URL 的端口号

hostname:设置或返回当前 URL 的主机名。

href:设置或返回完整的 URL。

pathname:设置或返回当前 URL 的路径部分

port:设置或返回当前 URL 的端口号

protocol:设置或返回当前 URL 的协议。

search:设置或返回从问号 (?) 开始的 URL(查询部分)。

assign()加载新的文档。

reload()重新加载当前文档。

replace()用新的文档替换当前文档。

我们先来属性的输出:

alert(window.location.hash)
alert(window.location.host)
alert(window.location.hostname)
alert(window.location.href)
alert(window.location.pathname)
alert(window.location.port)
alert(window.location.protocol)
alert(window.location.search)

看出,url的路径部分,还有?后面参数我们是会经常要处理的

我们进行方法的操作:

载入指定页面,这个我们不太常用

window.location.assign("2-js基本概念.html")

刷新当前页面,重新载入

window.location.reload();

(六)BOM综合实例

我们从dom看到bom,梳理出,js是一门基于对象的语言,处理的方式就是

obj.属性

obj.属性=“属性值”

obj.方法

obj.事件=方法

我们js的处理,应该在整个文档加载完运行,我们为了兼容,都要放入

window.onload=function(){}的内部去写js代码

我们做一些bom的综合实力处理:

检测是手机还是电脑做跳转:

//平台、设备和操作系统  
    var system ={  
        win : false,  
        mac : false,  
        xll : false  
    };  
    //检测平台  
    var p = navigator.platform;  
    alert(p);  
      
    /**var sUserAgent = navigator.userAgent.toLowerCase(); 
    alert(sUserAgent);*/  
      
    system.win = p.indexOf("Win") == 0;  
    system.mac = p.indexOf("Mac") == 0;  
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);  
    //跳转语句  
    if(system.win||system.mac||system.xll){//转向后台登陆页面  
        window.location.href="http://www.baidu.com";  
    }else{  
        window.location.href="http://t.qq.com";  
    }

检测浏览器类型和版本:

var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 
        //以下进行测试
        if (Sys.ie) document.write(‘IE: ‘ + Sys.ie);
        if (Sys.firefox) document.write(‘Firefox: ‘ + Sys.firefox);
        if (Sys.chrome) document.write(‘Chrome: ‘ + Sys.chrome);
        if (Sys.opera) document.write(‘Opera: ‘ + Sys.opera);
        if (Sys.safari) document.write(‘Safari: ‘ + Sys.safari);

BOM到这里,主要接口就介绍完毕,还有使用方法!bom的处理我们平时用的较少一些,主要是对dom的操作,把dom学好才是最主要的!

时间: 2024-08-02 12:57:44

JS原生系列-BOM篇的相关文章

JS原生系列-DOM篇(延伸)

关于DOM,这就是最后一部分了,这部分都是后台或者最新的dom api,学的时候需要多的记忆一次,有印象有保障! -.ajax的介绍:ajax输出json格式文件 jsonp的介绍 xhr2的介绍 http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp -.cookie的介绍:设置cookie和删除cookie -.html5 存储的介绍:web客户端存储(localStorage sessionsStorage) 缓存( c

JS原生第七篇 (帅哥)

1.1 复习 offset   自己的 偏移 offsetWidth    得到自己的宽度 offsetHeight 构成 :   width  +   padding  +  border div    width 200   border 3px    padding-right: 15px div  offsetWidth =    200 +  6  +  15  =  221 2.  offsetLeft      offsetTop div.offsetLeft 得到距离 这个 di

JS原生第六篇 (帅哥)

复习 按钮不可用    disabled =  "disabled"  ||  true setTimeout   只执行一次    setInterval  执行很多次 递归调用 :  函数自己调用自己  函数递归调用    不提倡用函数名 而喜欢用的是  arguments.callee    返回的是  正在执行的函数 本身 逻辑运算符   与  &&  或  ||   非  !         ! > && > || 2&&a

JS原生面向对象终结篇 (帅哥)

闭包 基础    面向对象基础 1.1 闭包 在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非持久型变量神奇地保留他们在闭包最初定义(或创建)时的值. 白话:  我们可以用一个函数 去访问 另外一个函数的内部变量的方式就是闭包. 内部变量 是 局部变量      那我们知道,局部变量是不可以为别人随便使用也. function fun() {    var num = 10;}console

js调试系列: 源码定位与调试[基础篇]

js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码其实非常简单,点放大镜选中那个推荐即可.这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置.其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看.我在控制台输入 voteP

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

js调试系列:断点和动态调试[基础篇]

js调试系列: 断点与动态调试[基础篇] js调试系列目录: - js调试系列: 初识控制台 js调试系列: 控制台命令行API js调试系列: 源码定位与调试[基础篇] js调试系列: 断点与动态调试[基础篇] js调试系列: 调试基础与技巧 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. 文本 function votePost(n,

js调试系列: 断点与动态调试[基础篇]

js调试系列目录: - 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i }; $("#digg_tips