您的位置:首页 > Web前端 > JavaScript

JavaScript系列四:浏览器对象

2015-02-03 21:57 302 查看
    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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: