6. BOM

6.1 widow对象

  • 全局作用域:

    • window是浏览器的一个实例

    • window对象同时扮演着ECMAScript中的Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

    • 访问未声明的变量会抛出错误,但是通过window.属性 访问时会显示undefined

    • 访问window里的对象,不用加window.

  • 窗口位置:

    • window.screenLeft 和 window.screenTop 属性分别表示窗口相对于屏幕左边和上边的位置,

    • FireFox 只支持screenX 和screenY 属性,Chrome支持两种

    • 跨浏览器使用:

      • var leftPos =(typeof window.screenLeft =="number") ? window.screenLeft : window.screenX ;

      • var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

      • 如果支持screenTop就用screenTop,否则就用screenY

  • 窗口大小:

    • innerWidth innerHeight 分别表示页面的宽和高,outerWidth 和 outerHeight表示加上边框的宽和高

    • chrome两者都是页面的宽和高

  • 导航和打开窗口:

    • window.open():

      • 第一个参数是:URL 第二个是:窗口目标(在那里打开,_self:当前页面 _blank:新窗口 _parent:父框架 'xxxx':窗口名称,没有的话就新建一个名为xxxx的窗口)

      • 第三个是:打开新窗口的样式

        参数 说明
        top 数值 表示新窗口的上坐标。不能是负值
        left 数值 表示新窗口的左坐标。不能是负值
        height 数值 表示新窗口的高度。不能小于100
        width 数值 表示新窗口的宽度。不能小于100
      • window.open("http://www.wrox.com/", "wroxWindow", "height=400,width=400,top=10,left=10");

        这行代码会打开一个窗口,初始大小为 400×400 像素,并且距屏幕上沿和左边各 10 像素。

      • window.open()方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似(window.open().alert(1)),但我们可以对其进行更多控制。例如,有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置,但却允许我们针对通过 window.open()创建的窗口调整大小或移动位置。

        • var wroxWin = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");

          //调整大小 wroxWin.resizeTo(500,500);

          //移动位置 wroxWin.moveTo(100,100);

          调用 close()方法还可以关闭新打开的窗口。

          wroxWin.close();

    • 间歇调用和超时调用:

      • setTimeOut(超时调用):

        • 它有两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。第一个参数可以使字符串形式的代码,也可以是函数。

          • setTimeOut(function(){alert(1)},2000);//推荐,字符串形式可能降低性能

          • 不建议使用:setTimeOut("alert(1)",2000); //两秒后执行alert(1)

        • 调用 setTimeout()之后,该方法会返回一个数值 ID,这个超时调用 ID 是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用 ID 作为参数传递给它,

          • var id = setTimeout(xxx); clearTimeOut(id);

      • setInterval(间歇调用):

        • 它接受的参数与 setTimeout()相同

          • 强烈不建议使用字符串

          • setInterval(function(){alert(1)},2000);//每隔两秒就弹出对话框

        • clearInterval(id);//同上

6.2 location对象

location == document.location == window.location

属性 例子 说明
location.hash #contents 返回url中的hash
location.host www.xxx.com:80 返回服务器名称和端口号(如果有)
location.hostname www.xxx.com 返回不带端口号的服务器名称
location.href http://www.xxx.com 返回当前加载页面的完整URL
location.pathname /index/a/ 返回URL中的目录和(或)文件名
location.port 8080 返回URL中指定的端口号。如果URL中不包含端口号,则
location.protocol http: 返回页面使用的协议。通常是http:或https:
location.search ?keyword=xxx 返回URL的查询字符串。这个字符串以问号开头

查询字符串参数:

function getArgs(){
if(location.search == ''){
return 'nonono';
}
var qs = location.search.substr(1);
var args = {};//保存参数,
var items = qs.split("&");//取得每一项
var item=null,name=null,value=null;
for(var i=0;i<items.length;i++){
item=items[i].split("=");
name = decodeURIComponent(item[0]);//url解码
value = decodeURIComponent(item[1]);
args[name] = value;
}
return args;
}
alert(getArgs());

  

位置操作:

  location.assign("http://qq.com");
location.href = 'http://qq.com';
location = 'http://qq.com';//这三个都是修改当前页面
location.hash = 'haha';
location.search='id=1001';
等等

location.reload();//重新加载(有可能从缓存加载)
location.reload(true);//重新加载(从服务器加载)

location.replace('url'); //将当前页面改为url指向的页面

  

6.3 navigator对象

6.4 screen对象

JavaScript 中有几个对象在编程中用处不大,而 screen 对象就是其中之一。screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen 对象都包含着各不相同的属性。

6.5 history对象

  • history.go(1)//前进一页

  • history.go(-1)//后退一页

  • history.go(-2) //后退2页

  • history.go('baidu.com')/跳转到最近的baidu.com页面

  • history.back()//后退一页

  • history.forward()//前进一页

6. Javscript学习笔记——BOM的更多相关文章

  1. JavaScript高级程序设计学习笔记--BOM

    window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的G ...

  2. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  3. 2. Javscript学习笔记——引用类型

    2. 引用类型 2.1 Object类型 Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为. 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象 ...

  4. js 学习笔记---BOM

    window对象 1. window 对象是Global对象,在全局作用域中声明的变量和函数都可以通过window.来访问.跟直接在window上添加属性效果一样.唯一的区别就是delete时,如果是 ...

  5. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  6. 《JavaScript语言精粹》学习笔记

    一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. DBus学习笔记

    摘要:DBus作为一个轻量级的IPC被越来越多的平台接受,在MeeGo中DBus也是主要的进程间通信方式,这个笔记将从基本概念开始记录笔者学习DBus的过程 [1] DBus学习笔记一:DBus学习的 ...

  9. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

随机推荐

  1. Python使用signal模块实现定时执行

    在liunx系统中要想每隔一分钟执行一个命令,最普遍的方法就是crontab了,如果不想使用crontab,经同事指点在程序中可以用定时器实现这种功能,于是就开始摸索了,发现需要一些信号的知识... ...

  2. Red Hat 6.5 网络yum源的配置

    第一次接触Linux系统,用虚拟机安装了一个rad hat6.5版本64位的,傻瓜式安装.安装好之后简单的写了一个C代码,进行gcc编译的时候,提示没有该命令,上网查找了一下说没有安装gcc编译器,用 ...

  3. hadoop分布式集群搭建前期准备(centos7)

    那玩大数据,想做个大数据的从业者,必须了解在生产环境下搭建集群哇?由于hadoop是apache上的开源项目,所以版本有些混乱,听说都在用Cloudera的cdh5来弄?后续研究这个吧,就算这样搭建不 ...

  4. HttpClient 上传/下载文件计算文件传输进度

    1.使用ProgressMessageHandler 获取进度 using namespace System.Net.Http; HttpClientHandler hand = new HttpCl ...

  5. javascript 如何创建只能执行一次的事件。

    document.getElementById("myelement").addEventListener("click", handler);   // ha ...

  6. 【微服务架构】SpringCloud之Eureka(注册中心集群篇)(三)

    上一篇讲解了spring注册中心(eureka),但是存在一个单点故障的问题,一个注册中心远远无法满足实际的生产环境,那么我们需要多个注册中心进行集群,达到真正的高可用.今天我们实战来搭建一个Eure ...

  7. java反射的补充:桥接方法以及Spring中一些工具类

    在上一篇博文中:http://www.cnblogs.com/guangshan/p/4660564.html 源码中有些地方用到了 this.bridgedMethod = BridgeMethod ...

  8. SQL存储原理及聚集索引、非聚集索引、唯一索引、主键约束的关系(补)

    索引类型 1.          唯一索引:唯一索引不允许两行具有相同的索引值 2.          主键索引:为表定义一个主键将自动创建主键索引,主键索引是唯一索引的特殊类型.主键索引要求主键中的 ...

  9. 解决Struts2拦截器的对于参数传递无效问题

    今天做项目时,使用拦截器对用户权限检查.拦截器本身没有问题,可是实现权限拦截,但是传递的参数全部都无效了.搞了很久,由于对拦截器的内部机制不是特别熟悉,所以重新研读了一下Struts2的拦截器.找到了 ...

  10. bitcoin script

    P2PK P2PKH,MS,P2SH,OP_RETURN 等的区别 1.P2PK pay_to_public_key pubkey script: <pubkey> OP_CHECKSIG ...