JS-BOM对象

BOM对象

 

 

  BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器“对话”。

 

一、windows对象

  所有的浏览器都支持带对象,因此在使用该对象时可以直接使用,可以使用windows调用,也可以省略。一个HTML文档对应一个windows对象,它被应用于控制浏览器的窗口。

1. 常用的方法

    //方法                              备注

    alert ( )            //显示带有一段消息和一个确认按钮的警告框
    confirm( )           //显示带有一段消息以及确认按钮和取消按钮的对话框
    prompt( )            //显示可提示用户输入的对话框
    setInterval( )       //按照指定的周期(以毫秒计)来调用函数或计算表达式
    clearInterval( )     //取消由 setInterval() 设置的 timeout对象
    setTimeout( )        //在指定的毫秒数后调用函数或计算表达式
    clearTimeout( )      //取消由 setTimeout() 方法设置的 timeout对象
    open( )              //打开一个新的浏览器窗口或查找一个已命名的窗口
    close( )             //关闭浏览器窗口
    scrollTo( )          //把内容滚动到指定的坐标

2. 实例

    <body>
    <input type="text" id="id1" onclick="begin()">
    <button onclick="end()">停止</button>
    <script>
        function showTime() { 
            var current_time = new Date().toLocaleString();
            var ele = document.getElementById("id1")
            ele.value = current_time
        }
        var clock1;
        function begin() {
            if (clock1 == undefined) {
                showTime();
                clock1 = setInterval(showTime, 1000)
            }
        }
        function end() {
            clearInterval(clock1);
            clock1 = undefined
        }
    </script>
</body>

 

二、history对象

History对象用于记录对用户访问过的URL,它是Windows对象的一部分。它的length属性可以返回浏览器历史列表中的URL数量。

history.forward( )与history.back( )

    //test1.html页面
    <body>
    <a href="test2.html"> 超链接跳转 </a>
    <button onclick="f()"> 按钮跳转 </button>
    <script>
        function f(){
            return history.forward();
        }
    </script>
    </body>

//---------------------------------------------------------------------------------------

    //test2.html页面
    <body>
    <button onclick="f()">返回</button>
    <script>
        function f(){
            return history.back();
        }
    </script>
    </body>

 history.go( 1 )与history.go( -1 )

    test1.html页面
    <body>
    <a href="test2.html"> 超链接跳转 </a>
    <button onclick="f()"> 按钮跳转 </button>
    <script>
        function f(){
            return history.go(1);
        }
    </script>
    </body>

//--------------------------------------------------------------------------------------

    test2.html页面
    <body>
    <button onclick="f()">返回</button>
    <script>
        function f(){
            return history.go(-1);
        }
    </script>
    </body>

 

三、location对象

 Loacation对象包含当前URL的先关信息。

         //方法                      备注

    location . assign( URL)        //打开URL,注意与replace区别
    location . reload( )           //重载当前页面,即刷新
    location . replace(newURL )    //打开newURL,并覆盖当前页面

 

 

 

 

 

猜你喜欢

转载自www.cnblogs.com/Lynnblog/p/9149715.html