首页 > 代码库 > JavaScript系列四:浏览器对象

JavaScript系列四:浏览器对象


    1、window对象
        Window对象是BOM的核心,window对象指当前浏览器窗口。
        alert()显示带有一段消息和一个确认按钮的警告框
        prompt()显示可提示用户输入的对话框
        confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
        open()打开一个新的浏览器窗口或查找一个已命名的窗口
        close()关闭浏览器窗口
        print()打印当前窗口的内容
        focus()把键盘焦点给予一个窗口
        blur()把键盘窗口从顶层窗口移开
        moveBy()可相对窗口的当前坐标把它移动指定像素
        moveTo()可相对窗口的左上角移动到一个指定的坐标
        resizeBy()按照指定的像素调整窗口的大小
        resizeTo()把窗口的大小调整到指定的宽度和高度
        scrollBy()按照指定的像素值来滚动内容
        scrollTo()把内容滚动到指定的坐标
        setInterval()每个指定的时间执行代码
        setTimeout()在制定的延迟时间之后来执行代码
        clearInterval()取消setInterval()的设置
        clearTimeout()取消setTimeout()的设置

    2、JavaScript计时器
        在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

        计时器类型:
        一次性计时器:仅在指定的延迟时间之后触发一次
        间隔性触发计时器:每个一定的时间间隔就触发一次。
        计时器方法:
        setTimeout() 指定延迟时间之后来执行代码
        clearTimeout() 取消setTimeout()设置
        setInterval() 每个指定的时间执行代码
        clearInterval()取消setInterval()设置

    3、计时器setInterval()
        在执行时,从载入页面后每隔指定的时间执行代码。
        语法:
            setInterval(代码,交互时间);
        参数说明:
            1. 代码:要调用的函数或要执行的代码串。
            2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。
        返回值:
            一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

    4、取消计时器clearInterval()
        clearInterval()方法可取消由setInterval()设置的交互时间
        语法:
            clearInterval(id_of_setInterval)
        参数说明:
            id_of_setInterval: 由setInterval()返回ID值

    5、计时器setTimeout()
        setTimeout()计时器,再载入后延迟指定时间后,去执行一次表达式,仅执行一次
        语法:
            setTimeout(代码,延迟时间);
        参数说明:
            1、要调用的函数或要执行的代码串
            2、延迟时间:执行代码前需等待的时间,以毫秒为单位

    6、取消计时器clearTimeout()
        setTimeout()和clearTimeout()一起使用,停止计时器。
        语法:
            clearTimeout(id_of_setTimeout)
        参数说明:
            id_of_setTimeout:由setTimeout()返回的ID值,该值表示要取消的延迟执行代码块。

    7、History对象
        history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
        注意:
            从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
        语法:
            window.history.[属性|方法]
        注意:
            window可以省略
        History对象属性
            length 返回浏览器历史列表中的URL数量
        History对象方法
            back()加载history列表中的前一个URL
            forward()加载history列表中的下一个URL
            go()加载history列表中的某个具体的页面

    8、返回前一个浏览的页面
        back()方法,加载history列表中的前一个URL
        语法:
            windows.history.back()
        注意:
            等同于点击浏览器的倒退按钮
        back()相当于go(-1)

    9、返回下一个浏览的页面
        forward()方法,加载 history 列表中的下一个 URL。
        如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下:
            window.history.forward();
        注意:等价点击前进按钮。
            forward()相当于go(1)

    10、返回浏览历史中的其他页面
        go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。
        语法:
            window.history.go(number);
        参数:
            1 前一个,go(1)等价forward()
            0 当前页面
            -1 后一个,go(-1)等价back()
            其他数值 要访问的URL在History的URL列表中的相对位置

    11、Location对象
        location用于获取或设置窗体的URL,并且可以用于解析URL
        语法:
            location.[属性][方法]
        location对象属性
            href:http://www.imooc.com:8080/list.php?courseid=8&chapterid=86#mediaid118
                设置或返回完整的URL
            protocol:http
                设置或返回当前的协议
            host:www.imooc.com:8080
                设置或返回主机名和当前URL的端口号
            hostname:www.imooc.com
                设置或返回当前URL的主机名
            port:8080
                设置或返回当前URL的端口号
            pathname:list.php
                设置或返回当前URL的路径部分
            search:courseid=8&chapterid=86
                设置或返回从?开始的URL(查询部分)
            hash:mediaid118
                设置或返回从#开始的URL(锚)
        location对象方法:
            assign()加载新的文档
            reload()重新加载当前的文档
            replace()用新的文档替换当前文档

    12、Navigator对象
        Navigator对象包含浏览器的信息,通常用于监测浏览器与操作系统的版本
        对象属性:
            appCodeName 浏览器代码名的字符串表示
            appName 返回浏览器的名称
            appVersion 返回浏览器的平台和版本信息
            platform 返回运行浏览器的操作系统平台
            userAgent 返回由客户机发送服务器的user-agent头部的值

    13、userAgent
        返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
        语法:
            navigator.userAgent
        几种浏览的user_agent.,像360的兼容模式用的是IE、极速模式用的是chrom的内核。

        chrome:Mozilla/5.0(Windows NT 6.1;WOW64)AppleWebKit/537.36(KHTML,like  Gecko)chrome/34.0.1847.116 Safari/537.36
        fireFox :Mozilla/5.0(WindowsNT6.1;WOW64;rv:24.0)Gecko/20100101 fireFox/24.0
        IE8:Mozilla/4.0(compatible;MSIE 8.0;Windows NT 6.1;WOW64;Trident/4.0;SLCC2;NET CLR2.0.50727;NET CLR3.5.30729;.NET CLR3.0.30729;.NET4.0C)
        if(u_agent.indexOf("Firefox")>-1){
            B_name="Firefox"; }
            indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果找不到这个字符串会返回-1,找到的话返回字符串所在的位置

    14、screen对象
        screen对象用于获取用户的屏幕信息。
        语法:
            windows.screen.属性
        availHeight   窗口可以使用的屏幕高度,单位px
        availWidth 窗口可以使用的屏幕宽度,单位px
        colorDepth 用户浏览器表示的颜色位数,通常32位(每像素的位数)
        pixelDepth: 用户浏览器表示的颜色位数,通常32位(每像素的位数)IE不支持
        height 屏幕的高度,单位px
        width 屏幕的宽度,单位px

    15、屏幕分辨率的高和宽
        window.screen 对象包含有关用户屏幕的信息。
        1. screen.height 返回屏幕分辨率的高
        2. screen.width 返回屏幕分辨率的宽
        注意:
        1.单位以像素计。
        2. window.screen 对象在编写时可以不使用 window 这个前缀。

    16、屏幕可用高和宽度
        1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。
        2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。
        注意:
            不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。

            var num=document.getElementById("second").innerHTML;
               //获取显示秒数的元素,通过定时器来更改秒数。
              
                function count()
                {
                    num--;
                    document.getElementById("second").innerHTML=num;
                    if(num==0)
                    {
                        location.assign("www.imooc.com");
                    }
                }
                setInterval("count()",1000);

JavaScript系列四:浏览器对象