全栈工程师开发手册 (作者:栾鹏)

js系列教程6-BOM操作全解

js中WINDOW对象

BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。

1、Window对象

Window 对象是 JavaScript层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 或每次出现时被自动创建。

1)对象属性

window //窗户自身, window=window.self可使用全局属性window访问 Window对象
document 对 Document 对象的只读引用。请参阅Document对象。
history 对 History 对象的只读引用。请参数History对象。
location 用于窗口或框架的 Location 对象。请参阅Location对象。
screen 对 Screen 对象的只读引用。请参数Screen对象。
navigator 对 Navigator 对象的只读引用。请参数Navigator对象。
defaultStatus 设置或返回窗口状态栏中的默认文本。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
name 设置或返回窗口的名称。
parent 返回父窗口。
top 返回最顶层的先辈窗口。
status 设置窗口状态栏的文本。
window.location //URL地址,配备布置这个属性可以打开新的页面

2)对象方法

window.close(); //关闭窗口
window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
window.prompt("What's your name?", "Default"); //提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
window.status //可以使状态栏的文本暂时改变
window.defaultStatus //默认的状态栏信息,可在用户离开当前页面前一直改变文本
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
window.clearTimeout("ID"); //取消还未执行的暂停,将暂停ID传递给它
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
window.clearInterval("ID"); //取消时间间隔,将间隔ID传递给它
window.history.go(-1); //访问浏览器窗口的历史,负数为后退,正数为前进
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //可以查看历史中的页面数
clearInterval() 取消由 setInterval() 设置的timeout。
clearTimeout() 取消由 setTimeout() 方法设置的timeout。
createPopup() 创建一个 pop-up 窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout(方法,秒数) 在指定的毫秒数后调用函数或计算表达式。 
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定时器传参数

3)成员对象

window.event
window.document
window.history
window.screen
window.navigator
Window.external
Window.location

扩展

① 如果文档包含框架(frame 或iframe标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象。

② window.frames 返回窗口中所有命名的框架

③parent是父窗口(如果窗口是顶级窗口,那么parentselftop)

top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)

self是当前窗口(等价window)

opener是用open方法打开当前窗口的那个窗口

④与消息框有关的方法:alert(String)、confirm(String)、prompt(String)

⑤两种定时器:setTimeout(code,latency) 和setInterval(code,period)

注:setTimeout只执行一次code,如果要多次调用,可以让code自身再次调用setTimeout();setInteval()会不停地调用code,直到clearInterval()被调用。

2、 history对象

window.history.length //浏览过的页面数
history.back() //在浏览历史里后退一步
history.forward() //在浏览历史里前进一步
history.go(i) //i>0进步,i<0撤退退却

3、 screen对象

screen对象:用于获取某些关于用户屏幕的信息,也可用window.screen引用它。

window.screen.width      //屏幕宽度
window.screen.height        //屏幕高度
window.screen.colorDepth    //屏幕颜色深度
window.screen.availWidth    //可用宽度(除去任务栏的高度)
window.screen.availHeight   //可用高度(除去任务栏的高度)

4 、external对象
  window.external.AddFavorite(“地址”,“标题” ) //把网站新增到保藏夹

5 、navigator对象
navigator`对象:包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用。可以参考navigator对象详解。

6、location对象

可以使用window引用,也可以使用document引用。详细介绍可以参考location对象详解

7、document对象

可以参考document对象文章

window对象思维导图

js中WINDOW对象相关推荐

  1. js中WINDOW对象中的location成员对象

    js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...

  2. js中WINDOW对象中的navigator成员对象

    js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...

  3. JS中window对象的opener属性

    JS中window对象的opener属性 JS中window对象的opener属性 window.opener是js中window的一个属性,它返回的是打开当前窗口的窗口对象.如果窗口A弹出一个窗口B ...

  4. html window 属性,html中window对象top 、self 、parent 等属性

    top 属性返回最顶层的先辈窗口. 该属性返回对一个顶级窗口的只读引用.如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用.如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口. ...

  5. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    JS中集合对象(Array.Map.Set)及类数组对象的使用与对比 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...

  6. 关于js中window.location.href,location.href,parent.location.href,top.location.href的使用方法

    关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

  7. Js中Proxy对象

    Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找.赋值.枚举.函数调用等. 语法 const proxy = new Proxy(target, handler); ta ...

  8. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  9. 关于js中window.location.href、location.href、parent.location.href、top.location.href的用法...

    关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

最新文章

  1. 您有一份阿里云云原生直播攻略待查收
  2. request的简介和运行环境
  3. 计算机等级考试真题演示,全国计算机等级考试二级真题测试(答案)四、演示文稿题-日...
  4. JavaScript数组对象简介及其常用方法介绍
  5. 03-19 分布式测试-Selenium Grid
  6. swift语言 数组定义_如何在Swift中声明弱引用数组?
  7. 贾君鹏你妈妈喊你回家吃饭-利用WCF的Duplex推送消息
  8. 设计模式-Decorator装饰模式
  9. imx8mm yocto_bsp 编译
  10. 六、CISSP 官方学习指南(OSG)第 7 版术语对照表
  11. FineBI 项目资源迁移
  12. 理解什么是symbolic link in Python
  13. 谷歌浏览器 Cookie 设置
  14. React Native version mismatch
  15. 计算机管理上移动硬盘显示其他设备,移动硬盘坏了插上之后电脑会显示有新设备接入而且设备运转正常,但我 爱问知识人...
  16. 【自学python爬虫】:入门书籍推荐(附资源)
  17. 彻底消除电脑中的流氓软件与广告弹窗
  18. git恢复commit过的代码
  19. [Firemonkey]开发Android系统的PDA手机扫码功能
  20. MySQL-SQL语句命令

热门文章

  1. 有道智云智能语音服务全面升级 最多可支持44种语言和方言
  2. 贪吃蛇大战 java小游戏百度云源码
  3. python爬虫爬取多个页面_Python爬虫笔记:爬取单个页面
  4. bcb6通过https接口post数据_3分钟短文 | 有挑战!PHP用1个函数实现post请求,你用哪个?
  5. python绘制动态条形图_Python 绘图与可视化 matplotlib 动态条形图 bar
  6. java浏览器渲染_优化浏览器渲染
  7. 【java笔记】继承
  8. 记录CodeForces第一次比赛经历
  9. java获取发件人_如何获取发件人outlook / Exchange的SMTP地址
  10. CSS中给表格的第一列及最后一列设置不同的样式