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 的输入和输出

    内置函数:raw_inpurt('place input') print getpass  隐藏输入密码 import getpass pwd = getpass.getpass("> ...

  2. Linux中找不到service命令

    解决方法: 1.su -l root su root:的话只是将当前身份转为root,用户shell并没有改变.所以有些系统命令不能使用.  su -或者su -l或者su -l root,可以完全的 ...

  3. 网站页面多出&65279出现空白行的原因及解决方法

    模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 这种编码方式一般会在windows操 ...

  4. oracle通过job执行procedure

    1. 先创建一个FUNCTION CREATE OR REPLACE FUNCTION GET_TIMEOUT_PROGRAM(i_customerNo IN TK_CUST_PROG_D.CUSTO ...

  5. python读写Excel文件(xlrd、xlwr)

    一.首先需要安装第三方库:pip install xlrd 1.打开Excel文件,由于写入时需要copy,所以这里加上保留原格式参数:formatting_info=True excel_file ...

  6. BeginInvoke & Invoke

    Winform: 1.BeginInvoke是将事件处理消息压入application的消息泵,实现的是win32的postmessage机制.压入消息泵后不等执行完即可返回. 2.Invoke是将事 ...

  7. C#中IO操作

    using sysytem.Io; File.Exists() 检查文件是否存在, Directory.Exists() 检查文件夹是否存在 FileInfo DirectoryInfo 可实例化 对 ...

  8. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  9. .net core 高性能对象映射

    关于对象转换已经有不少轮子(AutoMapper,TinyMapper) .出于项目需要,手动造一个简单轮子.先贴代码 1.采用静态泛型类缓存,避免了拆箱装箱操作. 2.对于转换对象中有,字段名一样但 ...

  10. zookeeper 开机启动

    第一种:直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行,其中export JAVA_HOME=/usr/java/jdk1.8.0_112是 ...