【基础-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
,长久保存整个网站的数据,不过期,直到手动去除
上一篇: 香蕉加青枣为什么有股怪味
下一篇: 古代重犯为何要发配边疆 而不是直接处死呢
推荐阅读
-
在IE7浏览器的基础上无法安装IE6(提示有最新版本)的问题解决
-
【java基础】面试常见问题:类和对象,封装继承多态,final关键字,static关键字,类加载过程,双亲委派模型
-
BOM—浏览器对象模型(Browser Object Model)
-
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
-
JavaScrip浏览器对象模型BOM
-
前端基础知识之浏览器模型
-
JavaScript之BOM浏览器对象模型
-
JavaScript基础:BOM的常见内置方法和内置对象
-
C++ STL 基础及应用(7) 函数对象(仿函数)
-
第二节--PHP5 的对象模型_php基础