6. Javscript学习笔记——BOM

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()//前进一页