资讯专栏INFORMATION COLUMN

javascript--BOM

explorer_ddf / 1449人阅读

摘要:对象的和新对象是它表示浏览器的一个实例。在浏览器中,对象有双重角色,它即是通过访问浏览器窗口的接口,又是规定的对象。如果不存在在中,则取得和的值。

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

全局作用域
由于 window 对象同时扮演着 ECMAScript中 Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法

var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29

我们在全局作用域中定义了一个变量 age 和一个函数 sayAge() ,它们被自动归在了 window 对象名下。于,可以通过 window.age 访问变量 age,可以通过 window.sayAge() 访问函数 sayAge()由于 sayAge() 存在于全局作用域中,因此 this.age 被window.age ,最终显示的仍然是正确的结果。
抛开全局变量会成为 window 对象的属性不谈,定义全局变量与window 对象上直接定义属性还是有一点差别:全局变量不能通过 delete 操作符删除,而直接在 window 对象上的定义的属性可以。

var age = 29;
window.color = "red";
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

另外,还要记住一件事:尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。

//这里会抛出错误,因为 oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//newValue 的值是 undefined
var newValue = window.oldValue;

本章后面将要讨论的很多全局 JavaScript 对象(如 location 和 navigator )实际上都是 window对象的属性。

窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的 window 对象,并且保存在 frames 集合中。在 frames集合中,可以通过数值索引(从 0 开始,从左至右,从上到下)或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性,其中包含框架的名称.

窗口位置

window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ?    window.screenTop : window.screenY;
```
这个例子运用三元操作符首先确定 screenLeft 和 screenTop 属性是否存在,如果是(在 IE、Safari、Opera 和 Chrome 中),则取得这两个属性的值。如果不存在(在 Firefox 中),则取得screenX和 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;
    }
    }

导航和打开窗口
弹出窗口window.open()
安全限制

系统对话框

location对象

查询字符串参数

function getQueryStringArg () {
    var qs = (window.location.search.length > 0 ? location.search.substring(1) : ""),
        args = {},
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        i = 0,
        len = items.length;
    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;
}

位置操作

history对象
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//后退一页
history.back();
//前进一页
history.forward()
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100579.html

相关文章

  • javascript bom

    摘要:包含是浏览器对象,全拼为包含什么包含以下打开窗口要打开的地址新窗口的位置默认链接到新页面关闭窗口只能关闭从网页中打开的页面系统对话框系统弹窗确认取消弹窗弹出能输入文本的对话框定时器定时器清除间接同上对象包含大量有关浏览器的信息,在检测浏 javascript包含(ecmascriptes3,5,6)bom dom Bom是浏览器对象,全拼为Browser Object Model Bo...

    venmos 评论0 收藏0
  • javascript bom

    摘要:包含是浏览器对象,全拼为包含什么包含以下打开窗口要打开的地址新窗口的位置默认链接到新页面关闭窗口只能关闭从网页中打开的页面系统对话框系统弹窗确认取消弹窗弹出能输入文本的对话框定时器定时器清除间接同上对象包含大量有关浏览器的信息,在检测浏 javascript包含(ecmascriptes3,5,6)bom dom Bom是浏览器对象,全拼为Browser Object Model Bo...

    zhangke3016 评论0 收藏0
  • js bom location对象

    摘要:一对象获取获取服务器名称和端口号获取服务器名称和端口号获取服务器名称和端口号获取不带端口号的服务器名称获取不带端口号的服务器名称获取整个获取整个返回中的目录和或文件名返回中的目录和或文件名返回的端口号返回的端口号返回的协议返回的协议返回的查 一、location对象 http://localhost:8881/javascript/BOM/window.html?name=bob&ag...

    Carson 评论0 收藏0
  • Javascript BOM简介

    摘要:简介浏览器对象模型通过对象来访问浏览器当前文件的框架集合浏览器环境信息浏览器及其相关功能的信息浏览器本地信息属性等方法刷新有历史记录替换页面无历史记录大于向后跳转个界面是的属性本身是函数类型的属性,赋值时需要接受一个函数当页面加载完毕才会执 BOM简介 BOM Browser Object Model 浏览器对象模型 showImg(https://segmentfault.com...

    tabalt 评论0 收藏0
  • JavaScript BOM——“location 对象”的注意要点

    摘要:对象基本介绍是最有用的对象之一,它提供了与当前窗口中加载的文档有关的信息。设置或返回主机名和当前的端口号。设置或返回当前的协议。另外,也可以修改对象的其他属性来改变。并且用户不能返回到值钱的页面。 location 对象基本介绍 location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息。还提供了一些导航功能。下面是 location 对象的所有属性: 假...

    未东兴 评论0 收藏0

发表评论

0条评论

explorer_ddf

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<