javascript-BOM 

BOM是 Brower Object Model 浏览器对象模型,操作浏览器部分功能的API,如前进,后退,刷新,滚动
BOM结构图:




从上图也可以看出：
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
DOM是BOM的一部分。
window对象：
window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，可以省略window。
一.弹出系统对话框
    alert('')是window.alert('')的简写,因为它是window的子方法
二.打开窗口,关闭窗口
    1.打开窗口语法:window.open('url','target')
        url:要打开的地址
        target:打开新窗口的位置可以是_blank,_self,_parent
    2.关闭窗口语法:window.close()
        注:关闭的是当前窗口,并不是打开的新窗口
        例:三秒之后打开百度,五秒后关闭
            <body>
            <script>
                setTimeout(function(){
                    window.open('http://www.baidu.com','_self')
                },3000);
                setTimeout(function(){
                    window.close()
                },5000);
            </script>
            </body>
    3.location对象
图




        (1)location.href  跳转
            例:点击盒子进行跳转
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                        div{
                            width: 100px;
                            height: 100px;
                            
                        }
                    </style>
                </head>
                <body>
                <div id="box">fgdfg</div>
                <script>
                    var oDiv=document.getElementById('box');
                    oDiv.onclick=function(){
                        location.href='http://www.baidu.com';
                    }
                </script>
                </body>
        (2)location.reload()  重新加载
            例:两秒钟之后重新加载页面
                <body>
                <div id="box">fgdfg</div>
                <script>
                    setTimeout(function(){
                        window.location.reload();
                    },2000);
                </script>
                </body>
    4.navigator对象
        userAgent:系统浏,览器,用来判断用户所使用的设备,系统等,不同的设备渲染出的页面不同
        platform:浏览器支持的系统  win/mac/linux
            例:
                <body>
                <div id="box">fgdfg</div>
                <script>
                    console.log(
                        window.navigator
                    )
                </script>
                </body>
    5.history对象
        (1)后退：
            history.back()
            history.go(-1)：0是刷新
        (2)前进：
            history.forward()
            history.go(1)
            用的不多。因为浏览器中已经自带了这些功能的按钮：














posted @ 2018-09-28 23:08  ★行者尚★  阅读(261)  评论(0)  编辑  收藏  举报