BOM操作常用命令详解及代码案例
BOM（Browser Object Model）是浏览器对象模型，是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象，虽然没有正式的标准，但现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。本文将详细介绍BOM操作中的常用命令，并通过代码案例进行解释。
1. 获取浏览器窗口尺寸
- 获取可视窗口宽度：
window.innerWidth - 获取可视窗口高度：
window.innerHeight
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>var m1 = window.innerWidth;var m2 = window.innerHeight;
console.log(m1);
console.log(m2);</script></body></html>
2. 浏览器的弹出层
- 提示框：
window.alert('提示信息') - 询问框：
window.confirm('提示信息') - 输入框：
window.prompt('提示信息', '默认值')
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// window.alert('你好!')// var res = window.confirm('你好吗?')// console.log(res)var res2 = window.prompt('你是哪个省的?');
console.log(res2);</script></body></html>
3. 开启和关闭标签页
- 开启：
window.open('地址') - 关闭：
window.close()
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><buttonid="on">开启</button><buttonid="off">关闭</button><script>var on = document.getElementById('on');var off = document.getElementById('off');
on.onclick=function(){
window.open('https://www.baidu.com/');}
off.onclick=function(){
window.close();}</script></body></html>
4. 浏览器常见事件
- 资源加载完毕：
window.onload = function() {} - 可视尺寸改变：
window.onresize = function() {} - 滚动条位置改变：
window.onscroll = function() {}
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><imgsrc="图片链接"alt=""><script>
window.onload=function(){
console.log('资源已经加载完毕');}
window.onresize=function(){
console.log('可视尺寸改变');}
window.onscroll=function(){
console.log('滚动条位置改变');}</script></body></html>
5. 浏览器的历史记录操作
- 回退页面：
window.history.back() - 前进页面：
window.history.forward() - 跳转到指定页面：
window.history.go(n)，其中n可以是负数（表示后退）或正数（表示前进）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><buttononclick="goBack()">回退</button><buttononclick="goForward()">前进</button><buttononclick="goToPage(-2)">回退两页</button><script>functiongoBack(){
window.history.back();}functiongoForward(){
window.history.forward();}functiongoToPage(n){
window.history.go(n);}</script></body></html>
6. 浏览器卷去的尺寸和滚动
- 卷去的高度：
document.documentElement.scrollTop或window.scrollY - 卷去的宽度：
document.documentElement.scrollLeft或window.scrollX - 滚动到指定位置：
window.scrollTo(left, top)或window.scrollTo({left: xx, top: yy, behavior: 'smooth'})
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{width: auto;height: 3000px;}button{position: fixed;bottom: 50px;right: 50px;}</style></head><body><buttonid="go">传送</button><script>var go = document.getElementById('go');
go.onclick=function(){
window.scrollTo({left:300, top:400, behavior:"smooth"});}</script></body></html>
7. Navigator对象
Navigator
对象包含有关浏览器的信息。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>
console.log('浏览器品牌', navigator.appName);
console.log('浏览器版本', navigator.appVersion);
console.log('用户代理', navigator.userAgent);
console.log('操作系统', navigator.platform);</script></body></html>
标签：
前端
javascript
本文转载自: https://blog.csdn.net/qq_63447955/article/details/142674921
版权归原作者 TechFrontRunner 所有， 如有侵权，请联系我们删除。
版权归原作者 TechFrontRunner 所有， 如有侵权，请联系我们删除。