欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-28 21:02:15
...

一、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,长久保存整个网站的数据,不过期,直到手动去除

相关标签: DOM