美文网首页
js BOM对象

js BOM对象

作者: angelwgh | 来源:发表于2017-01-04 12:42 被阅读0次

    Window对象

    BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中, window 对象有双重角色,
    它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。这意味着
    在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有权访问
    parseInt()等方法。

    浏览器窗口位置


    用来确定和修改 window 对象位置的属性和方法有很多。 IE、 Safari、 Opera 和 Chrome 都提供了
    screenLeftscreenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在
    screenX 和 screenY 属性中提供相同的窗口位置信息, Safari 和 Chrome 也同时支持这两个属性。使用下列代码可以跨浏览器取得窗口左边和上边的位置。

    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
    

    窗口大小


        var pageWidth = window.innerWidth,
            pageHeight = window.innerHeight;
    
        if (typeof pageWidth != "number"){
            if (document.compatMode == "CSS1Compat"){
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }
    

    location 对象


    location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性,也是document 对象的属性;换句话说, window.location 和 document.location 引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。下表列出了location 对象的所有属性(注:省略了每个属性前面的 location 前缀) 。

    属 性 名 例子 说明
    hash "#contents" 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串
    host "www.wrox.com:80" 返回服务器名称和端口号(如果有)
    hostname "www.wrox.com" 返回不带端口号的服务器名称
    href "http:/www.wrox.com" 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
    pathname "/WileyCDA/" 返回URL中的目录和(或)文件名
    port "8080" 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串
    protocol "http:" 返回页面使用的协议。通常是http:或https:
    search "?q=javascript" 返回URL的查询字符串。这个字符串以问号开头

    查询字符串参数

    虽然通过上面的属性可以访问到 location 对象的大多数信息,但其中访问 URL 包含的查询字符串的属性并不方便。尽管 location.search 返回从问号到 URL末尾的所有内容,但却没有办法逐个访问其中的每个查询字符串参数。为此,可以像下面这样创建一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象:

    function getQueryStringArgs(){
        //取得查询字符串并去掉开头的问号
        var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        //保存数据的对象
        args = {},
        //取得每一项
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        //在 for 循环中使用
        i = 0,
        len = items.length;
        //逐个将每一项添加到 args 对象中
        for (i=0; i < len; i++){
            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);
            if (name.length) {
                args[name] = value;
            }
        }
        return args;
    }
    

    位置操作

    location.assign("http://www.wrox.com");
    

    立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.hrefwindow.location 设置为一个 URL 值,也会以该值调用 assign()方法。

    在这些改变浏览器位置的方法中,最常用的是设置 location.href 属性。

    另外,修改location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、 hostname、 pathname 和 port 属性设置为新值来改变 URL。

        //假设初始 URL 为 http://www.wrox.com/WileyCDA/
        //将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
        location.hash = "#section1";
        //将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
        location.search = "?q=javascript";
        //将 URL 修改为"http://www.yahoo.com/WileyCDA/"
        location.hostname = "www.yahoo.com";
        //将 URL 修改为"http://www.yahoo.com/mydir/"
        location.pathname = "mydir";
        //将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
        location.port = 8080;
    

    每次修改 location 的属性(hash 除外),页面都会以新 URL 重新加载。

    当通过上述任何一种方式修改 URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用 replace()方法。这个方法只接受一个参数,即要导航到的URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。

    location.reload();
    

    重新加载页面

    navigator 对象

    属性或方法 说明 IE Firefox Safari/Chrome Opera
    appCodeName 浏览器的名称。通常都是Mozilla,即使在非Mozilla浏览器中也是如此 3.0+ 1.0+ 1.0+ 7.0+
    appMinorVersion 次版本信息 4.0+ - - 9.5+
    appName 完整的浏览器名称 3.0+ 1.0+ 1.0+ 7.0+
    appVersion 浏览器的版本。一般不与实际的浏览器版本对应 3.0+ 1.0+ 1.0+ 7.0+
    buildID 浏览器编译版本 - 2.0+ - -
    cookieEnabled 表示cookie是否启用 4.0+ 1.0+ 1.0+ 7.0+
    cpuClass 客户端计算机中使用的CPU类型(x86、68K、 Alpha、 PPC或Other) 4.0+ - - -
    javaEnabled() 表示当前浏览器中是否启用了Java 4.0+ 1.0+ 1.0+ 7.0+
    language 浏览器的主语言 - 1.0+ 1.0+ 7.0+
    mimeTypes 在浏览器中注册的MIME类型数组 4.0+ 1.0+ 1.0+ 7.0+
    onLine 表示浏览器是否连接到了因特网 4.0+ 1.0+ 9.5+
    opsProfile 似乎早就不用了。查不到相关文档 4.0+
    oscpu 客户端计算机的操作系统或使用的CPU 1.0+
    platform 浏览器所在的系统平台 4.0+ 1.0+ .0+ 7.0+
    plugins 浏览器中安装的插件信息的数组 4.0+ 1.0+ 1.0+ 7.0+
    preference() 设置用户的首选项 1.5+
    product 产品名称(如 Gecko) 1.0+ 1.0+
    productSub 关于产品的次要信息(如Gecko的版本) 1.0+ 1.0+
    register-ContentHandler() 针对特定的MIME类型将一个站点注册为处理程序 2.0+
    register-ProtocolHandler() 针对特定的协议将一个站点注册为处理程序 2.0

    相关文章

      网友评论

          本文标题:js BOM对象

          本文链接:https://www.haomeiwen.com/subject/zqpovttx.html