什麼是 BOM?

BOM（Browser Object Model）即瀏覽器物件模型提供了獨立於內容而與瀏覽器視窗進行互動的物件。由於 BOM 主要用於管理視窗與視窗之間的通訊，因此其核心物件是 window。

相關方法(屬性)

彈出框

window.alert()

URL 的屬性

// 當前 html 的 URL
location.href
//  https://www.baidu.com/lastpath/go?name=zhangshan&id=89785#index

// 查詢字串部分
location.search
// ?name=zhangshan&id=89785

// #號後面的值
location.hash
// #index

// 域名
location.host
// www.baidu.com

// 主域名
location.hostname
// baidu.com

// 主域名後面部分/路徑
location.pathname
// lastpath/go

// 埠號
location.port
// 80(預設埠號)

// 協議部分
location.protocal
// https:

// 載入指定的URL
location.assign()

// 替換指定的URL,不同於assgin，無法返回
location.replace()

// 重新整理
location.reload()
 

history 物件

// 前進或者後退指定的頁面數
// 正為前進，負為後退
history.go()

// 後退一頁
history.back()

// 前進一夜
history.forward()

Navigator 物件

// 返回使用者代理頭的字串
navigator.userAgent

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

// 返回是否可以支援cookie
navigator.cookieEnabled

// 返回瀏覽器名稱
navigator.appName // Chrome,IE

// 返回瀏覽器核心
navigator.appCodeName // Mozilla
 

size

// 瀏覽器的視窗高度
window.innerHeight
// 瀏覽器的視窗寬度
window.innerWidth

注意： 瀏覽器視窗的檢視不包括工具欄和滾動條 也就是說，在全屏狀態下，不同瀏覽器因為不同的瀏覽器佈局（工具欄、收藏欄、搜尋欄）導致不同的innerHeight和innerWidth

open

window.open(url, target, specs, replace)

• url要開啟視窗的路徑

• target開啟方法

  • _blank在新視窗開啟，預設為_blank
  • _self在原視窗開啟，替代原視窗
  • _parent在父框架中開啟
  • name 指定在某個視窗開啟

• specs規定新視窗的樣式（用,連線）

  • width=pixels
  • height=pixels
• replace是否在history列表中替代當前頁面

window.open('https://www.baidu.com','_self','width=1920,height=1080')

計時事件

window.setTimeout(fn, ms)
window.setInterval(fn, ms)

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

Cookies

Cookies 用來在頁面儲存使用者資訊

什麼是 Cookies

在伺服器將頁面傳送給瀏覽器後，伺服器與瀏覽器之間的連線就斷開了，因為 HTTP 協議是無狀態的，此時，伺服器就不會記得關於使用者的任何資訊。

Cookie 就可以來記住使用者資訊：

• 當用戶訪問頁面是，他的名字就被儲存到 Cookie 中。
• 當他下次訪問頁面時，Cookie 就會記得她的名字

儲存方式

name = Kisn

當瀏覽器向伺服器傳送網頁請求時，對應這個頁面的 cookies 就被加入到了請求中，這樣的伺服器就能獲取到辨認這個使用者的所需的資訊。

操作 cookies 的方法

JavaScript可以用個document.cookie屬性來穿件、讀取和刪除 cookies

// 建立
function setCookie(name, val, time) {
  var exp = new Date()

  exp.setTime(exp.getTime() + time)
  document.cookie = name + '=' + val + ';expires=' + exp.toGMTString()
}
// 讀取
function getCookie(name) {
  let reg = new RegExp('(^| )' + name + '=([^;]*(;|$))')

  if ((res = document.cookie.match(reg))) {
    return unescape(res[2])
  } else {
    return false
  }
}

// 刪除

function delCookie(name) {
  let exp = new Date()
  exp.setTime = exp.getTime() - 1
  let cval = getCookie(name)
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}

Cookie 和 Session 的區別

http 是一種無狀態協議，因此 Cookie 的最大的作用是儲存 sessionId 用辨識使用者

Cookie、sessionStorage、localStorage 的區別

• 共同點

  • 都是儲存在瀏覽器端，並且是同源的

• 不同點

  • Cookie:

    • 儲存大小：4KB
    • 參與伺服器通訊
    • 只要是同源的 http 請求中，都會存在 cookie，即 cookie 在瀏覽器和伺服器之間來回傳遞，而且有實效（expires）。cookie 有路徑的概念，我們可以限制 cookie 只屬於某個路徑下

  • sessionStorage:

    • 儲存大小：5M
    • 不參與伺服器通訊
    • 僅在當前瀏覽器視窗（該程序）會話期間有效，資料不是伺服器請求儲存的，而且只有在請求時使用資料。

  • localStorage:

    • 儲存大小：5M
    • 不參與伺服器通訊
    • 在同源視窗可以共享，但是除非資料被清除，否則會一直存在。資料不是伺服器請求儲存的，而且只有在請求時使用資料。

Cookie 如何防範 XSS 攻擊

XSS 是什麼？

XSS 全稱 跨站指令碼攻擊，我們可以理解為：通過某種方法向 web 頁面注入程式碼，同時瀏覽器可以被執行這段程式碼。
比如簡單的論壇回覆，可以插入部分 HTML、css、js，可以獲取我們的 Cookie

我們可以在 HTTP 頭部配置，來防禦 XSS 獲取 Cookie。

set-cookie: httponly // 禁止js指令碼來訪問cookie
set-cookie: secure // 僅在請求為https的時候傳送cookie

screen

• screen.width 顯示器的寬度
• screen.height 顯示器的高度
• screen.availWidth 螢幕的可用寬度
• screen.availHeight 螢幕的可用高度