临沂网站建设昂牛网络,后台管理网页界面设计,如何赋予网站建设以生命力,河北做it的网站BOM操作常用命令详解及代码案例
BOM#xff08;Browser Object Model#xff09;是浏览器对象模型#xff0c;是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象#xff0c;虽然没有正式的标准#xff0c;但现代浏览器已经几乎实现了Java…BOM操作常用命令详解及代码案例
BOMBrowser Object Model是浏览器对象模型是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象虽然没有正式的标准但现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性因此常被认为是BOM的方法和属性。本文将详细介绍BOM操作中的常用命令并通过代码案例进行解释。
1. 获取浏览器窗口尺寸
获取可视窗口宽度window.innerWidth获取可视窗口高度window.innerHeight
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptvar m1 window.innerWidth;var m2 window.innerHeight;console.log(m1);console.log(m2);/script
/body
/html2. 浏览器的弹出层
提示框window.alert(提示信息)询问框window.confirm(提示信息)输入框window.prompt(提示信息, 默认值)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript// window.alert(你好!)// var res window.confirm(你好吗?)// console.log(res)var res2 window.prompt(你是哪个省的?);console.log(res2);/script
/body
/html3. 开启和关闭标签页
开启window.open(地址)关闭window.close()
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton idon开启/buttonbutton idoff关闭/buttonscriptvar 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
/html4. 浏览器常见事件
资源加载完毕window.onload function() {}可视尺寸改变window.onresize function() {}滚动条位置改变window.onscroll function() {}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg src图片链接 altscriptwindow.onload function() {console.log(资源已经加载完毕);}window.onresize function() {console.log(可视尺寸改变);}window.onscroll function() {console.log(滚动条位置改变);}/script
/body
/html5. 浏览器的历史记录操作
回退页面window.history.back()前进页面window.history.forward()跳转到指定页面window.history.go(n)其中n可以是负数表示后退或正数表示前进
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton onclickgoBack()回退/buttonbutton onclickgoForward()前进/buttonbutton onclickgoToPage(-2)回退两页/buttonscriptfunction goBack() {window.history.back();}function goForward() {window.history.forward();}function goToPage(n) {window.history.go(n);}/script
/body
/html6. 浏览器卷去的尺寸和滚动
卷去的高度document.documentElement.scrollTop 或 window.scrollY卷去的宽度document.documentElement.scrollLeft 或 window.scrollX滚动到指定位置window.scrollTo(left, top) 或 window.scrollTo({left: xx, top: yy, behavior: smooth})
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {width: auto;height: 3000px;}button {position: fixed;bottom: 50px;right: 50px;}/style
/head
bodybutton idgo传送/buttonscriptvar go document.getElementById(go);go.onclick function() {window.scrollTo({left: 300, top: 400, behavior: smooth});}/script
/body
/html7. Navigator对象
Navigator对象包含有关浏览器的信息。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconsole.log(浏览器品牌, navigator.appName);console.log(浏览器版本, navigator.appVersion);console.log(用户代理, navigator.userAgent);console.log(操作系统, navigator.platform);/script
/body
/html
