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)    收藏  举报

导航