1BOM介绍
1.1.BOM的概念
BOM是Browser Object Model的缩写,简写浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互
的对象,用于访问浏览器的功能.BOM由一系列相关的对象构成,并且每个对象都提供了一些方法
JavaScript语法的标准化基础是ECMA,DOM的标准化组织是W3C,但是BOM缺乏标准,由于BOM缺少
规范,每个浏览器提供商又按照自己想法去扩展它.那么浏览器扩展对象成了事实的标准
1.2
window对象是BOM的核心,window对象表示浏览器窗口的对象,每个浏览器窗口都有一个window对象与之对应
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的
image.png
2.window对象的属性对象
document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)
history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
frames: 框架对象，可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息
3.window对象的方法:
alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
setInterval(): 设置定时器
clearInterval() : 移除定时器
setTimeOut() : 设置延时器
clearTimeOut(): 移除延时器
close(): 关闭窗口
print(): 调出打印对话框
window.close();//关闭窗口
window.print()//调出打印对话框
confirm()//弹出一个需要用户确认的输入框
4.window对象的属性和方法的调用:
window对象的属性和方法的调用方式，可以使用 window.属性、window.方法()或者一般可以直接使用: 属性、方法()的方式调用。
例如：window.alert() 和 alert()效果是一样的
5, 系统对话框
alert(“谢谢”); 弹出警告框
confirm(“请确定或者取消”); 提示框 :确定和取消
if (confirm((“请确定或者取消”)){
alert(“您按了确定！”); //按确定返回true
} else{
alert(“您按了取消！”) //按取消返回false
}
confirm("请确认或者取消");
if(confirm(`请确认或者取消`)){//按确定返回true
alert("您按下了确认按钮")
}else{
alert("您按了取消")//按取消返回false
}
var num = prompt(“请输入一个数字”, 0); 带输入的提示框: 提示文字和输入框默认值
alert(num); //点击确定得到输入的值, 点击取消返回null
var num=prompt("????");
alert(num);
console.log(typeof num);//string 返回的为字符串类型
6, window.open()
window.open(): 打开指定的网址url. 一般可以接受三个参数:
(1. 要加载的URL 2. 窗口的名称 或者 窗口的目标 3. 一个特性的字符串)
open(“http://www.baidu.com”); //新建页面并打开百度
open(“http://www.baidu.com”, “baidu”); //新建页面并打开百度,窗口命名为baidu
open(“http://www.baidu.com”, “_parent”); //在本页窗口打开, _blank是新建(默认)
注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。
第三个字符串参数:
width/height: 新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标
open(‘http://www.baidu.com’, ‘baidu’,‘width=400,height=400,top=200,left=200’ );
window.open("https://bilibili.com","parent",
"width=25%,height:25%,top=20%,left=50%")
opener: 父窗口对象
document.onclick = function(){
opener.document.write("调用父窗口对象输出!");
}
7, location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。
事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和
document.location等效。
alert(window.location); //获取当前的URL
alert(location); //window可以省略
alert(window.document.location);
location对象的属性
image.png
location对象的属性
location.hash = ‘#1’; //设置#后的字符串，并跳转
console.log(location.hash); //获取#后的字符串
console.log(location.port); //获取当前端口号
console.log(location.hostname); //获取主机名(域名)
console.log(location.pathname); //获取当前路径(服务器地址后部分)
console.log(location.search); //获取?后面的字符串
location.href = “http://www.baidu.com”; //设置跳转的URL，并跳转
location对象的方法
location.assign(‘http://www.baidu.com’); //跳转到指定的URL, 与href等效
location.reload(); //最有效的重新加载,有缓存加载
location.reload(true); //强制加载,从服务器源头重新加载
location.replace(“http://www.baidu.com”); //用新的URL替代,可以避免产生历史记录
image.png
<script>
// window.location
console.log(location.protocol);
//协议 https port 443
// http 80
//location的属性
console.log(location.host);//host hostname+port
console.log(location.hostname);//主站域名
console.log(location.port);//端口
console.log(location.pathname); //路径
console.log(location.search); //search=? query
console.log(location.hash);// #后面的hash值
console.log(location.herf);
//location的方法(跳转,大部分)
jump.onclick=function(){
// location="https://www.baidu.com";
// location.href="https://www.qq.com"
// location.replace("https://www.sina.com") //没有历史记录,不能回退
// location.assign("http://www.douyu.com")
// 刷新页面
// location.reload()
// location.reload(true)//强制刷新
//content 3秒刷新一次
// <meta http-equiv="refresh" content="10">
}
</script>
query传递参数
Hash用来做单页面程序
image.png
image.png
基于哈希的变化,网页切换时主体内容不会变换
8, history对象
history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起.
hsitory指的是这个窗口的历史记录,不是整个浏览器的历史纪录
history对象的属性
history.length; //history对象中的记录数
history对象的方法
history.back(); //前往浏览器历史条目前一个URL, 类似后退
history.forward(); //前往浏览器历史条目下一个URL, 类似前进
history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)
// history 历史
//
// history.forward()
// history.back()
// history.go() -1 后退,0刷新 1前进
9, navigator对象(了解)
navigator对象是window对象的属性，它保存了浏览器的信息, 如: 浏览器名称,版本,浏览器所在的电脑操作
系统等。
navigator对象的属性
console.log(navigator.appName); //浏览器名称
console.log(navigator.appVersion); //浏览器版本
console.log(navigator.platform); //操作系统
//最新的浏览器已经全面放弃以上这些属性
navigator对象的属性
console.log(navigator.userAgent); //用户代理信息, 通过该属性可以获取浏览器及操作系统信息
console.log(navigator.userAgent);
//Mozilla/5.0 (Windows NT 10.0; Win64; x64)
// AppleWebKit/537.36 (KHTML, like Gecko)
// Chrome/91.0.4472.124 Safari/537.36
image.png
close() 关闭浏览器
例如: 5秒后关闭浏览器
setTimeout(function(){
window.close();
alert("窗口关闭");
}, 5000);
注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()
print(): 调出打印对话框
