Bom的介绍及使用方法
bom === borwer object model 浏览器对象模型
特点:
1.bom是进行浏览器操作的
2.bom里面是存在多个对象的
3.bom实际进行操作浏览器是使用多个对象里面的属性以及相关方法
4.bom没有规范 我们所讲的是bom的共有对象
Window常用的属性及方法
window.innerHeight 获取高度(浏览器窗口可视区域的高度)
window.innerWidth 获取宽度(浏览器窗口可视区域的宽度)
window.alert('你好') 提示窗 没有返回值
window.confirm('你确认要删除吗?') 弹交互窗口 点击确认返回true 点击取消返回false
window.prompt('请输入你要输入的号码') 弹出输入框 返回的是string
window.console.log('你好') == console.log('你好') 所以window. 可以省略
第一个参数是打开的位置url
第二个是打开的方式也可以是窗口的名字
第三个是其他的设置
window.open('百度一下,你就知道','百度','_parent,width=400,height=400,top=200,left=200')
关闭窗口 浏览器不允许
window.close() 关闭当前的窗口
window.print() 将页面进行打印
opener 表示父窗口 我打开的浏览器窗口和我本身的窗口对应的window对象不一致
opener.document.write("调用父窗口对象输出!")
定时器
window.setInterval(function(){
},2000)
延时器
window.setTimeout(function(){
},2000)
location和history以及navigator
console.log(window.location) == console.log(location) 也可以window.
location的属性
location.hash 返回锚点 有就返回锚点值 没有就是空
location.host 主机地址 访问的地址 www.baidu.com /14.215.177.39
location.hostname 主机名 www.baidu.com
location.href 链接地址 // 百度一下,你就知道
location.port 端口号 //默认的浏览器占用端口80 /地址栏没有显示端口就没有端口
location.protocol 协议名 https http(默认的)file协议
location.pathname 路径名 拿到访问地址后的路径地址/主机名或端口号后面的 资源路径地址
location.search 用来接收?传递值 获取?后面的信息
location.origin 跨域信息
通过地址栏来进行页面跳转 给href赋值
location.href = '百度一下,你就知道'
通过assign方法来跳转页面 传入的参数是你需要跳转的页面
location.assign('淘宝网 - 淘!我喜欢')
reload方法 重新加载
location.reload() //默认会从缓存中加载 (速度会更快)
location.reload(true) //去服务器端加载
跳转页面 他会移除当前页面在历史记录里面 历史记录只会存在一个就是跳转好的
替换本身的地址来完成跳转 同时删除本身的历史记录
location.replace('小游戏,7k7k小游戏,小游戏大全,双人小游戏 - www.7k7k.com')
history
histroy是历史对象 保存历史页面
添加一个历史记录 第一个参数为数据 第二个参数为标题 第三个参数为url地址(可以省略)(必须要和本身具备相同的orgin值)
history.pushState('hello','hello')
替换state值 在对应的url
history.replaceState('world','world')
length属性 返回历史页面的个数
console.log( history.length)
状态值 没有存默认为null
console.log( history.state)
history.forward() 前进的方法
history.back() 后退的方法
history.go(2) 去任意历史页面 默认自己这页是0 -1 -2(后退) 1 2(前进)
应用:
function fn(){
history.forward() //前进的方法
}
function fn1(){
history.back() //后退的方法
}
function fn2(){
// 默认自己这页是0 -1 -2(后退) 1 2(前进)
history.go(2) //去任意历史页面
}
navigator
navigator对象的属性
console.log(navigator.appName); //浏览器名称 console.log(navigator.appVersion); //浏览器版本 console.log(navigator.platform); //操作系统 //最新的浏览器已经全面放弃以上这些属性
navigator对象的属性 console.log(navigator.userAgent); //用户代理信息, 通过该属性可以获取浏览器及操作系统信息
close() 关闭浏览器
5秒后关闭浏览器
注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()
print(): 调出打印对话框
5秒后关闭浏览器
setTimeout(function(){
window.close();
alert("窗口关闭");
}, 5000);
注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()
总结
document(核心): 文档对象,让我们可以在js脚本中直接访问页面元素(DOM)
history(重要): 历史对象,包含窗口的浏览历史,可以实现后退
location(重要): 包含浏览器当前的地址信息,可以用来刷新本页面或跳转到新页面
frames: 框架对象,可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息(浏览器版本信息等 最新版本的浏览器是不支持的)