4、BOM

BOM

window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
</head>
<body>
<script type="text/javascript">
        //1 如何获得window对象
                //window对象 由浏览器创建.当浏览器加载页面时,浏览器会立刻自动创建window对象.
                // 如果要获得,直接使用即可.

        //2 window中的方法
            // alert
            // confirm  弹出确认框
            // prompt 弹出一个输入框 返回值为str. 点击取消返回null.
                //---------------------------------
                var b = confirm("您确定要删除吗?");
                alert(b);
                //---------------------------------
            var str =   prompt("请输入一个整数!","0");
            alert(typeof str); // 确定就是string,取消就是object
 //-------------------------------------------------------------------------

        </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
</head>
<body>
<!--open打开一个新窗口,close当前关闭窗口-->
    <script type="text/javascript">
        function close2() {
            window.close();
        }
        /* open()返回值是window对象,即新打开的窗口
         参数:1、打开的url,2、窗口名称即name属性 3、窗口的长宽 4、是否将新窗口的地址加入浏览器历史记录中
         */
         function open2() {
            window.open("BOM.html");
        }
    </script>
    <script type="text/javascript">
    // setInterval和setInterval
        // 定时器方法, 每2000毫秒后alert一次
        // 参数1,可以是一般的String,内容是js代码;也可以是一个函数,参数2,间隔毫秒
        // 返回当前定时器的id
        var id = window.setInterval("alert('haha')", 2000)
        function stop() {
            window.clearInterval(id);
        }

        // setTimeout和clearTimeout
        // 比较setInterval和setInterval,唯一的区别就是timeout是指执行一次,而intenval是每隔一段时间就执行一次
    </script>
    <input type="button" onclick="stop();" value="停止计时器">
    <input type="button" onclick="open2();" value="新建窗口">
</body>
</html>

history对象

当前页面,具有前进按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
</head>
<body>
    <a href="history对象2.html">点我前进</a>
    <input type="button" onclick="window.history.forward();" value="前进">
    <!--go(1)表示前进1页,就是下一页,可以传入-1就是上一页-->
    <input type="button" onclick="window.history.go(1);" value="前进2">
</body>
</html>

页面2,具有后退按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
</head>
<body>
    <input type="button" onclick="window.history.back();" value="后退">
    <input type="button" onclick="window.history.go(-1);" value="后退2">
</body>
</html>

页面之间的交互,需要获取window对象,如下图,分别为盒子模型和单个页面的模型。

location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--assign加载新的文档
    reload重新加载当前文档-->
<input type="button" onclick="window.location.href='window对象.html'"  value="window对象.html"  />
<input type="button" onclick="window.location.assign('window对象.html')"  value="assign"  />
<input type="button" onclick="window.location.reload()"  value="刷新"  />
</body>
</html>

2017.3.9

by @sunhaiyu

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容