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

导航