红皮书-第八章-BOM

Hero
553 阅读3分钟

window对象

window既表示js访问浏览器窗口的接口，又是ECMAscript规定的Global对象

全局作用域

全局作用域生成的变量、函数都会变成window对象的方法和属性。 但是全局变量不可以通过delete删除，window对象定义可以删除

 // 定义
var age  = 29
window.color = 'red'
  // 删除
delete window.age //报错
delete window.color // true
  // 打印
window.age // 29
window.color //undefined

窗口关系及框架

这里的框架指的不是我们现在所使用的react、vue框架，而是<frameset/>标签。只放代码具体不再多解释，可自行百度

<html>
    <head>
       <title>理解万岁</title>
    </head>
    <frameset rows = '160,*'>
        <frame src="index.html" name="index">
        <frameset clos = '50%,50%'>
            <frame src="indexOne.html" name="indexOne">
            <frame src="indexTwo.html" name="indexTwo">
        </frameset>
    <frameset>
</html>

窗口位置

属性 位置 支持浏览器
screenLeft 左边 IE、Safari、Opera、Chrome
screenTOP 上边 IE、Safari、Opera、Chrome
screenX 左边 FireFox、Safari、Opera、Chrome
screenY 上边 FireFox、Safari、Opera、Chrome

窗口大小

属性 位置
window.innerWidth
window.innerHeight		 页面视图区域大小包含滚动条
window.outerWidth
window.outerHeight		 浏览器窗口本身大小
document.documentElement.clientHeight
document.documentElement.clientWidth		 返回页面视图区域大小不包含滚动条

导航和打开窗口

windiow.open(打开地址，A标签target属性，新窗口配置项)

参数 取值范围 说明
alwaysLowered yes/no 指定窗口隐藏在所有窗口之后
alwaysRaised yes/no 指定窗口悬浮在所有窗口之上
depended yes/no 是否和父窗口同时关闭
directories yes/no Nav2和3的目录栏是否可见
height pixelvalue 窗口高度
hotkeys yes/no 在没菜单栏的窗口中设安全退出热键
innerHeight pixelvalue 窗口中文档的像素高度
innerWidth pixelvalue 窗口中文档的像素宽度
location yes/no 位置栏是否可见
menubar yes/no 菜单栏是否可见
outerHeight pixelvalue 设定窗口(包括装饰边框)的像素高度
outerWidth pixelvalue 设定窗口(包括装饰边框)的像素宽度
resizable yes/no 窗口大小是否可调整
screenX pixelvalue 窗口距屏幕左边界的像素长度
screenY pixelvalue 窗口距屏幕上边界的像素长度
scrollbars yes/no 窗口是否可有滚动栏
titlebar yes/no 窗口题目栏是否可见
toolbar yes/no 窗口工具栏是否可见
Width pixelvalue 窗口的像素宽度
z-look yes/no 窗口被激活后是否浮在其它窗口之上 
var a = window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

使用open方法打开后可以控制新的窗口,只适用于新打开窗口

//窗口移动至0，0的位置
a.moveTo(0,0)
//向下移动100像素
window.moveBy(0,100)
//调整浏览器大小至
a.resizeTo(100,100)
调整浏览器加大100，50
a.resizeBy(100,50)
//关闭窗口
a.close()
新页面关联旧页面
window.opener

延时器和定时器

//设置延时器
var timeout = setTimeout(()=>{},100)
//清空延时器
clearTimeout(timeout)
//设置定时器
var Interval = setInterval(()=>{},100)
//清空定时器
clearInterval(Interval)

系统弹框

  1. alert() 提示框
  2. confirm() 选择框
  3. prompt() 输入框
  4. window.print() 打印框
  5. window.find() 查找框 需要输入查找的字段

location

属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 
window.location = http://www.baidu.com
loacation.assign (http://www.baidu.com)
loacation.href = http://www.baidu.com

以上三种效果一样

location.reload() //刷新页面
location.replace()//跳转至新的页面并且不会保存当页面的历史，用户不能回退至当前页面
avatar
文章
阅读
粉丝