【基础-7】BOM基础：浏览器对象模型

一、Window：打开的窗口

============================================================================

1、尺寸

内部高度(包括滚动条)

window.innerWidth
window.innerHeight

对于 Internet Explorer 8

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

2、获取浏览器宽高：兼容所有浏览器

var w = window.innerWidth|| document.documentElement.clientWidth || document.body.clientWidth;
var h =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
x = document.getElementById("demo");
x.innerHTML = "浏览器window宽度: " + w + ", 高度: " + h + "。"

3、方法

打开新窗口：window.open()
关闭当前窗口：window.close()
移动当前窗口：window.moveTo()
调整当前窗口的尺寸：window.resizeTo()

二、Window Screen：用户屏幕，属性

============================================================================
可用的屏幕宽度：screen.availWidth
可用的屏幕高度：screen.availHeight
总高度：height
总宽度：width
调色板的比特深度：colorDepth
颜色分辨率：pixelDepth

三、Window Location：获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

============================================================================
对象属性：8个
锚部分：hash
主机名和端口：host
主机名：hostname
完整的URL：href
路径名：pathname
端口号：port
协议：protocol
查询部分：search

对象方法：3个
assign()：载入新文档
reload()：重新载入
replace()：替换原文档

四、Window History：问过的URL历史

============================================================================
对象属性：网址数 length

对象方法：3个
前一个 URL：history.back()
下一个 URL：history.forward()
具体页面：history.go()

五、Window Navigator：浏览器的信息

============================================================================
对象属性：6个
代码名：appCodeName
名称：appName
平台和版本信息：appVersion
浏览器中是否启用 cookie 的布尔值：cookieEnabled
操作系统平台：platform
客户机发送服务器的user-agent 头部的值：userAgent

对象方法：2个
是否启用Java：javaEnabled()
是否启用数据污点(data tainting)：taintEnabled()

六、弹窗

============================================================================
警告框：window.alert("sometext");
确认框：window.confirm("sometext");
提示框：window.prompt("sometext","defaultvalue");

七、计时事件：计时器、定时器

============================================================================
计时器：setInterval(handler: any, timeout?: long, arguments...: any)
清除计时器：clearInterval(handle?: long)
示例：每三秒弹出 “hello”

setInterval(function(){
	alert("Hello");
},3000)

定时器：setTimeout(handler: any, timeout?: long, arguments...: any)
清除定时器：clearTimeout(handle?: long)
示例：等待3秒，然后弹出 “Hello”

setTimeout(function(){alert("Hello")},3000);

八、存储对象：存储web页面的用户信息，进行添加、删除、修改、查询操作

============================================================================
方式一：Cookie
增加：document.cookie = "username=John Doe;expires=Thu,18 Dec 2043 12:00:00 GMT;path=/"
删除：document.cookie = "username=;expires=Thu,01 Jan 1970 00:00:00 GMT";
修改：类似于创建cookie
读取：var x = docuemnt.cookie;
示例：页面载入时执行

//1.创建
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;
}
//2.获取
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 "";
}
//3.修改
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

方式2：存储对象 H5 API
属性-length：数据条数

方法
第n个键的名称：key(n)
增加|更新：setItem(keyname,value)
删除：removeItem(keyname)
查询：getItem(keyname)
清除：clear()

web存储API
会话存储：window.localStorage，临时保存同一窗口的数据，关闭后会删除这些数据
本地存储：window.sessionStorage，长久保存整个网站的数据，不过期，直到手动去除