BOM之 窗口、location、History、Navigator、Cookie

课程目标

  • 掌握常见BOM对象的操作

课程内容

浏览器对象模型Browser Object Model (BOM)

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

window.document.getElementById("header");
window.Math

1. 浏览器窗口大小

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

//对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth

2. window.location

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面

location.hash  url#号后面的内容
location.href  完整的url
location.hostname  域名

如何重新加载某个链接

location.href = "http://www.baidu.com";
location.reload();   //刷新当前页面

3. window.history

window.history 对象包含浏览器的历史

history.back()       //浏览器后退
history.forward()    //浏览器前进
history.go(1) //前进1步

4. navigator

如何判断手机系统

var isAndroid = /android/i.test(navigator.userAgent);
var isIos = /ipad|iphone|mac/i.test(navigator.userAgent);

navigator.onLine //判断是不是联网 navigator.geolocation //获取用户位置

5. cookie

Cookies 是一些数据, 存储于你电脑上的文本文件中。存储的数据量少为4k。

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间。默认情况下,cookie 在浏览器关闭时删除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
    {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
  return "";
}

6. localStorage

存储的数据为几M。

localStorage.a = 1;
localStorage["name"] = "kevin";
localStorage.setItem("age","100");
localStorage.removeItem("age");

var obj = {name: 'kevin', age: 100};
localStorage.value = JSON.stringify(obj);