浏览器对象模型(Browser Object Model(BOM))允许 JavaScript 与浏览器对话。
浏览器对象模型(Browser Object Model(BOM))
不存在浏览器对象模型(BOM)的官方标准。
现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到。
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至(HTML DOM 的)document 对象也是 window 对象属性:
窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸:
window.innerHeight - 浏览器窗口的内高度(以像素计)
window.innerWidth - 浏览器窗口的内宽度(以像素计)
浏览器窗口(浏览器视口)不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth
\
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 重新调整当前窗口
function show(){
let xh = sessionStorage.getItem('stuNo')
let cj = sessionStorage.getItem('chinese')
document.write(xh+'<br>');
document.write(cj);
document.write(sessionStorage.stuNo+'<br>');
document.write(sessionStorage.chinese);
}
window.alert(1) */
/* 确认框 window.confirm() 用于验证是否接受用户操作 */
/* let flag = confirm('你是最强王者吗');
alert(flag) */
/* 你是一个好学生吗?
如果是 就alert出 继续加油
如果不是 就alert出 我还要努力 */
// if( confirm('你是一个好学生吗?') ){
// alert('继续加油')
// }else{
// alert('我还要努力')
// }
/* prompt的第二个参数是默认值 */
// let v = prompt('今天你快乐吗','快乐')
// alert(v)
/* 这个是地址的参数信息 */
// console.log(window.location.search);
// /* 这是地址路径 */
// console.log(window.location.href)
// /* 这个是地址的端口 */
// console.log(window.location.port)
\
/* 后退 */
function back() {
/* window.history.back(); */
/* 两者的作用一致 都是后退 */
window.history.go(-1);
}
/* 前进 */
function forward(){
/* window.history.forward(); */
window.history.go(1)
}
/* 刷新 */
function go(){
/* go里面是没有任何参数的 */
/* window.history.go(); */
/* 两者功能相等 都是刷新 */
/* window.history.go(0); */
/* 这个也表示刷新 */
location.reload();
}
/* 写个 前进 和后退 和刷新 的按钮 使用不同的方式 */
\
sessionStorage 存储之后 页面刷新 缓存的值不会消失
localStorage会一致存储在本地,会话或者tab页关闭也不会消失
/* sessionStorage 存储之后 页面刷新 缓存的值不会消失
但是 把tab页 或者叫 会话 关闭之后,缓存的值就不存在了 */
// function fn1(){
// /* setItem设置 存储 */
// /* sessionStorage.setItem('name','zhangsan') */
// sessionStorage.name = 'zhangsan';
// }
// function fn2(){
// /* getItem获取 */
// // let v = sessionStorage.getItem('name');
// // document.write(v);
// document.write(sessionStorage.name);
// }
\
/* 设置和取值 使用两种方式都试一下 */
/* 点击按钮 设置一个学生信息 学号 stuNo 语文成绩 chinese
存到sessionStorage缓存中,再点击按钮 可以在页面显示出学生的学号
和语文成绩 ,最后把tab关闭,再次打开页面看值之后还存在 */
\
// function fn1(){
// // sessionStorage.stuNo = '1908'
// // sessionStorage.chinese = '90'
// sessionStorage.setItem('stuNo','1099')
// sessionStorage.setItem('chinese','80')
// }
// function fn2(){
// // document.write(sessionStorage.stuNo);
// // document.write(sessionStorage.chinese);
// document.write(sessionStorage.getItem('stuNo'));
// document.write(sessionStorage.getItem('chinese'));
// }
\
/* localStorage会一致存储在本地,会话或者tab页关闭也不会消失 */
/* localStorage是和地址有关系的,地址改变了,localStorage里面的值就不存在了
前面地址没有发生改变的话,localStorage依然存在 ,虽然页面改变了*/
function fn1(){
/* localStorage.setItem('car','bmw') */
localStorage.car = 'bc'
}
function fn2(){
/* document.write(localStorage.getItem('car')); */
document.write(localStorage.car);
}
\