我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。
今日学习目标
昨天主要来说给最近的三十天左右学习 ECMAScript
基础 做一个总结 ,今天主要开始基于搜索基础学习 BOM window 对象,又是适合学习的一天,加油,小又又!!!!
今日学习概要
- 基础了解 window
- 窗口大小属性
基础了解 window
基础定义
window
对象表示一个包含DOM
文档的窗口,其 document
属性指向窗口中载入的 DOM
文档 。
使用 document.defaultView
属性可以获取指定文档所在窗口。
window
作为全局变量,代表了脚本正在运行的窗口,暴露给 Javascript
代码。
接口继承
window
对象实现了 Window
接口,此接口继承自 AbstractView 接口。
一些额外的全局函数、命名空间、对象、接口和构造函数与 window 没有典型的关联,但却是有效的,它们在 JavaScript参考 和 DOM参考 中列出。
窗口
window
对象不共享
在有标签页功能的浏览器中,每个标签都拥有自己的 window
对象;也就是说,同一个窗口的标签页之间不会共享一个 window
对象。
有一些方法,如 window.resizeTo
和 window.resizeBy
之类的方法会作用于整个窗口而不是 window
对象所属的那个标签。一般而言,如果一样东西无法恰当地作用于标签,那么它就会作用于窗口。
outerWidth 属性
基础说明
Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度,包括侧边栏(如果存在)、窗口镶边(window chrome)和调正窗口大小的边框(window resizing borders/handles)。
该属性为只读,没有默认值。
要改变一个窗口的大小,可参考 window.resizeBy() 和 window.resizeTo()。
要获取一个窗口的内层宽度(inner width),即页面被展示的区域,请参考 window.innerWidth。
语法
outWindowWidth = window.outerWidth;
值
outWindowWidth 是窗口的外层的宽度。
outerHeight 属性
基础说明
Window.outerHeight 获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边(window chrome)和窗口调正边框(window resizing borders/handles)。
该属性为只读,没有默认值。
要改变窗口的大小,请查看 window.resizeBy() 和 window.resizeTo()。
要获取窗口的内层高度,即页面被显示区域的高度,可查看 window.innerHeight。
语法
outWindowHeight = window.outerHeight;
值
outWindowHeight 为窗口的外层的高度。
innerWidth 属性
基础说明
只读的 Window 属性 innerWidth 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。
更确切地说,innerWidth 返回窗口的 layout viewport 的宽度。 窗口的内部高度——布局视口的高度——可以从 innerHeight 属性中获取到。
如果你需要获取除去滚动条和边框的窗口宽度,请使用根元素 <html>
的clientWidth 属性。
innerWidth 属性在任何表现类似于窗口的任何窗口或对象(例如框架或选项卡)上都是可用的。
语法
let intViewportWidth = window.innerWidth;
值
一个整数型的值表示窗口的布局视口宽度是以像素为单位的。这个属性是只读的,并且没有默认值。
若要更改窗口的宽度,请使用 Window 的方法来调整窗口的大小,例如resizeBy() 或者 resizeTo()。
使用
// 返回视口的宽度
var intFrameWidth = window.innerWidth;
// 返回一个框架集内的框架的视口宽度
var intFrameWidth = self.innerWidth;
// 返回最近的父级框架集的视口宽度
var intFramesetWidth = parent.innerWidth;
// 返回最外层框架集的视口宽度
var intOuterFramesetWidth = top.innerWidth;
好像没看到区别
innerHeight属性
基础说明
浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。
任何窗口对象,如 window、frame、frameset 或 secondary window 都支持 innerHeight 属性。
有一个算法用来获取不包括水平滚动条的视口高度。
语法
var intViewportHeight = window.innerHeight;
值
intViewportHeight
为浏览器窗口的视口的高度。
window.innerHeight
属性为只读,且没有默认值。
使用
var intFrameHeight = window.innerHeight; // or
var intFrameHeight = self.innerHeight;
// 返回frameset里面的frame视口的高度
var intFramesetHeight = parent.innerHeight;
// 返回上一级frameset的视口的高度
var intOuterFramesetHeight = top.innerHeight;
// 返回最外部frameset的视口的高度
好像没看到区别
今日学习总结
今日心情
今天主要基础了解了一下window 和 窗口大小相关,希望明天学习更多~~~~
本文使用 mdnice 排版