紅皮書-第八章-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()//跳轉至新的頁面而且不會保存當頁面的歷史，用戶不能回退至當前頁面
複製代碼