红皮书-第八章-BOM

window对象

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

全局做用域

全局做用域生成的变量、函数都会变成window对象的方法和属性。可是全局变量不能够经过delete删除，window对象定义能够删除vue

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

窗口关系及框架

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

<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)
复制代码

系统弹框

alert() 提示框
confirm() 选择框
prompt() 输入框
window.print() 打印框
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
复制代码

以上三种效果同样bash

location.reload() //刷新页面
location.replace()//跳转至新的页面而且不会保存当页面的历史，用户不能回退至当前页面
复制代码