JS学习八:BOM
一、什么是BOM:window...
BOM:浏览器的对象模型(browser object model),是一个用于访问浏览器和计算机屏幕的对象集合。
我们可以通过全局对象window来访问这些对象。
二、BOM的六个属性:
几个重要的BOM对象的属性:
- window.document:页面文档对象
- window.frames:当前页面中所有框架的集合,浏览器框架
- window.navigator:浏览器的描述信息,用于反应浏览器及其功能信息的对象
- window.screen:计算机屏幕信息,提供除浏览器以外的环境信息
- window.location:
- window.history:
window.location:
- href属性:控制浏览器地址栏的内容
- reload:刷新页面,带缓存
- reload(true):刷新页面,不带缓存
- assign():加载新的页面,会在历史记录表中留下记录。
- replace():加载新的页面。注意:不会再浏览的历史记录表中留下记录
window.history:
- window.history.length:获取历史记录的长度
- back():上一页
- forward():下一页
- go(num):num<0时,跳转到自己后方的第num个记录。num>0时,跳转到自己前方的第num个记录。
一个简单的页面跳转:
新建red.html页面:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>red</title> </head> <body style="height: 1000px;background-color: red;"> </body> </html>
在index.html文件中,设置跳转页面:
<body> <script src="js/test.js" type="text/javascript"></script> <button onclick="func()">跳转到红页面</button> </body>
当点击 ”跳转到红页面“ 按钮时,调用func()函数。func函数,可以定义在本页面,但最好定义在jss文本中。
在text.js文件中,创建func函数,使用window.location.href=红页面,使得调用此函数时,跳转到href的页面。
function func() {
console.log("点我干啥?")
window.location.href="red.html"
}
刷新页面:
function func() {
window.location.reload(true)
}
function func() { // window.location.href="red.html" //跳转到红页面 // window.location.reload() //刷新页面,带缓存 // window.location.reload(true) //刷新页面,不带缓存 window.location.assign("red.html") //加载新的页面,记录在历史记录表中,可以退回到上一页面。 // window.location.replace("red.html") //加载新的页面,不记录在历史记录表中,不能回退到上一页面。 }
红页面上的跳转:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>red</title> </head> <body style="height: 1000px;background-color: red;"> <button onclick="func()">跳转到黄页面</button> <button onclick="func1()">上一页</button> <button onclick="func2()">下一页</button> <script type="text/javascript"> function func () { window.location.assign("yellow.html"); } function func1 () { window.history.back(); } function func2 () { window.history.forward(); } </script> </body> </html>
黄页面上的跳转:
<button onclick="func()">回到主页</button> <script type="text/javascript"> function func () { window.history.go(-2); // console.log(window.history.g); } </script>
三、window(BOM)的一些方法
window.open(页面,打开页面的位置,style):打开一个新窗口或新页面或原来的位置,style是指新窗口或新页面的样式
示例:
window.open("red.html", "blank", "width=400px, height=400px, left=20px, top=0")
示例中,blank打开一个新的浏览器窗口,浏览器窗口的宽高400*400px,靠屏幕左侧20px,靠顶部0px。
window.close(),关闭当前窗口或页面。
四、window的一些事件
onclick点击,onload加载,onscroll滚动,onresize窗口变化,等事件
<script type="text/javascript"> // 当整个页面完成加载成功,触发onload事件.是指整个页面的内容都加载成功,包括本行代码行之后的页面代码. window.onload = function () { alert("页面加载成功") } alert("哈哈") </script>
多个onload会覆盖,后面的覆盖前面的。
页面的高度超过窗口的高度时,才可能会有滚动事件
<script type="text/javascript"> window.onscroll = function(){ console.log("发生了滚动") } </script>
滚动的高度,根据高度,加载新的数据
window.onscroll = function(){ console.log("发生了滚动") //获取滚动的高度或屏幕的高度 var h = document.documentElement.scrollTop || document.Screen.height console.log(h) if (h == 500*i) { console.log("加载新的数据") } } </script>
窗口大小发生变化的事件,
<script type="text/javascript"> window.onresize = function(){ console.log("发生了屏幕窗口改变") w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight console.log(w, h) } </script>
间歇性定时器:
<script type="text/javascript"> // 每2000毫秒执行一次函数 var time = window.setInterval(function () { console.log("每2000毫秒执行一次函数") }, 2000) function func1 () { // 清除定时器 window.clearInterval(time) } </script>
延时性定时器:
<script type="text/javascript"> var time = window.setTimeout(function () { console.log("3秒钟后,执行一次此函数") }, 3000); </script>
posted on 2018-11-18 16:33 myworldworld 阅读(96) 评论(0) 收藏 举报