8. javacript高级程序设计-BOM
1. BOM
1.1 window
BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重身份,
1.1.1 全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
1.1.2 窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架的名称来访问相应的window对象。
top对象始终指向最高(最外)层的框架,也就是浏览器窗口
parent对象始终指向当前框架的直接上层对象
self对象始终指向window对象
1.1.3 窗口位置
用来确定和修改window对象的属性和方法有很多,
IE,Safari,Opera和Chrome提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置
Firefox则提供screenX和screenY提供相同的窗口位置信息
1.1.4 窗口大小
跨浏览器确定窗口大小不是一件容易的事,虽然无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小
|
var pageWidth = window.innerWidth; var 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; } } |
1.1.5 导航和打开窗口
使用window.open()既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。
这个方法接受四个参数:要加载的URL,窗口目标,一个特定的字符串以及一个新页面是否取代浏览器历史记录中当前加载页面的布尔值。
1.1.6 间歇调用和超时调用
|
var timeoutid = setTimeout(function() { alert('hi'); }, 1000); //一秒后调用 clearTimeout(timeoutid); //取消 var intervalid = setInterval(function(){ alert('ho'); },1000); //一秒钟调用1次 clearInterval(intervalid);//取消 |
1.2 location
location是最有用的BOM对象之一,它既是window对象的属性也是document对象的属性。
|
属性名 |
例子 |
说明 |
|
hash |
#contents |
返回URL中的hash(#后跟0或多个字符),如果URL中不包含散列,则返回空字符串 |
|
host |
www.wrox.com:80 |
返回服务器名称和端口号(如果有) |
|
hostname |
www.wrox.com |
返回不带端口号的服务器名称 |
|
href |
http:/www.wrox.com |
返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
|
pathname |
/wiley/ |
返回URL中的目录和(或)文件名 |
|
port |
8080 |
返回URL中指定的端口号。如果URL中不存在端口号,则这个属性返回空字符串 |
|
protocol |
http: |
返回页面使用的协议。通常是http:或者https: |
|
search |
?q=javascript |
返回URL地址中的查询字符串。这个字符串以问号开头 |
1.3 navigator
主要用来识别客户端浏览器的事实标准
1.4 screen
screen对象基本上只能用来表明客户端的能力,其中包括浏览器窗口外部的显示器信息等。
1.5 history
history对象是window对象的属性,保存着用户上网的历史记录。history存在go,back,forward三个方法用来浏览历史记录。
|
//后退一页 history.go(-1); //前进一页 history.go(1); //前进2页 history.go(2); //跳转到历史记录的 baidu.com网站 history.go("baidu.com"); //后退一页 history.back(); //前进一页 history.forward(); |
history对象还有一个length属性,保存在历史记录的数量。这个数量包括所有历史记录,即所有向前和向后的记录。
8. javacript高级程序设计-BOM的更多相关文章
- Javascript高级程序设计——BOM(浏览器对象模型)
BOM(浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象.BOM由一系列相关的对象构成.一.window对象 window对象表示整个浏览器窗口,但不必表示其中包含的内容.W ...
- 1. javacript高级程序设计-JavaScript简介
JavaScript诞生于1995年,由Netscape公司布兰登·艾奇开发,JavaScript主要包括三个部分: (1). ECMAScript,由ECMA-262定义,提高核心语言功能 (2). ...
- 笔记-JS高级程序设计-BOM篇
BOM提供了很多对象,用于访问浏览器的功能.这些功能与任何网页无关. 1BOM的核心对象是window,它代表浏览器的一个实例,它是通过JS访问浏览器窗口的一个借口,同时又是ECMAScript规定的 ...
- 2020/6/10 JavaScript高级程序设计 BOM
BOM(浏览器对象模型):提供用于访问浏览器的对象. 8.1 window对象 window是BOM的核心对象,表示浏览器的一个实例. JavaScript访问浏览器窗口的接口 ECMAScript规 ...
- 25. javacript高级程序设计-新兴的API
1. 新兴的API requestAnimationFrame():是一个着眼于优化js动画的api,能够在动画运行期间发出信号.通过这种机制,浏览器就能够自动优化屏幕重绘操作 Page Visibi ...
- 24. javacript高级程序设计-最佳实践
1. 最佳实践 l 来自其他语言的代码约定可以用于决定何时进行注释,以及如何进行缩进,不过JavaScript需要针对其松散类型的性质创造一些特殊的约定 l javascript应该定义行为,html ...
- 23. javacript高级程序设计-数据存储
1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过 ...
- 22. javacript高级程序设计-高级技巧
1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...
- 21. javacript高级程序设计-Ajax与Comet
1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2 ...
随机推荐
- CLion注册码算法逆向分析实录
Link is : http://www.cnblogs.com/foreach-break/p/CLion_License_Fake_Crack.html
- C#多线程学习(一) 多线程的相关概念(转)
什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...
- css+html 总结+归纳
趁着清明的3天时间,我专门看了xhtml的一套视频,虽然是xhtml但是也隐喻了很多经验,巩固了一下自己的基础,我自己也写了很多大大小小的东西,但是越写我越发觉自己基础的薄弱,果然没错!还是学到了一些 ...
- 关于精简安装office2010的步骤
首先我们安装系统都会安装一个办公套件:office当然你也可以选择使用wps但我个人比较讨厌wps的广告 然而使用office完整安装不仅消耗资源大启动速度慢,而且一些功能我都用不到,所以我这几来一个 ...
- 推荐近期15个 Node.js 开发工具
近来Node.js 越来月流行了,这个基于Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些 ...
- webapp开发要点记录
1. iphone 各机型 机型 分辨率 像素比 物理分辨率 高* 宽 * 后 主屏对角线长度 重量 像素密度(ppi) iphone4/iphone4s 320 * 480 2 640 * 960 ...
- EF方便的添加一条信息...
//刚开始通过EF添加数据都是这样的...↓ var db = new DBEntities() T_User t_userinfo = new T_User() { Type = "typ ...
- 微信电脑版微信1.1 for Windows更新 可@人/转发撤回消息/可播小视频
微信电脑版微信1.1 for Windows发布更新了,版本号为1.1.0.18,群聊可@人/可转发撤回消息/可播小视频,功能越来越接近微信手机版了. 本次更新的一些新特点: 群聊中可以@人. 消息可 ...
- Mac OS 中的 Python(和 NumPy)开发环境设置
http://www.python()tab.com/html/2013/pythonjichu_1010/582.html ()需要删除
- “RESTful架构”相关资料收藏
[阮一峰]理解RESTful架构 [InfoQ]深入浅出REST 用于构建 RESTful Web 服务的多层架构 REST会是SOA的未来吗? Restful 与 SOA 的关系? 回答1: 注意r ...