前端基礎(chǔ)整理 | Javascript基礎(chǔ) (五)BOM

BOM

一、BOM是什么

BOM是針對(duì)瀏覽器的一種對(duì)象模型,用于描述這種對(duì)象與對(duì)象之間層次關(guān)系的模型。瀏覽器本身的特性(如當(dāng)前位置、瀏覽器寬高、以及系統(tǒng)環(huán)境等),而這些與當(dāng)前的web頁(yè)面并無(wú)關(guān)系,而是與當(dāng)前的window(整個(gè)瀏覽器的窗口)相關(guān)。

二、window對(duì)象

BOM的核心對(duì)象是window,它表示瀏覽器的一個(gè)實(shí)例。
在瀏覽器中,window具有雙重身份:(1)JS訪問(wèn)瀏覽器窗口的接口;(2)ECMAScript中規(guī)定的Global對(duì)象
所以,網(wǎng)頁(yè)中任何一個(gè)對(duì)象、變量、函數(shù),都以window作為Global對(duì)象。因此可以訪問(wèn)parseInt()等方法。
知識(shí)點(diǎn):

  1. 在全局作用域中聲明的變量、函數(shù)都會(huì)變成window的屬性和方法。
  2. 使用框架的情況,每個(gè)框架都擁有自己的window對(duì)象,并且保存在frames集合中,可以用window.frame[0]來(lái)引用。當(dāng)然最好用另一套表達(dá):top最上層window指針、parent父級(jí)window指針、self當(dāng)前窗口。
  3. 移動(dòng)窗口:
window.screenX // 獲取當(dāng)前橫坐標(biāo)
window.screenY // 獲取當(dāng)前縱坐標(biāo)
window.moveTo(0,0) // 絕對(duì)坐標(biāo)
window.moveBy(0,0) // 相對(duì)坐標(biāo)
  1. 窗口大小:
window.innerWidth  // 對(duì)視圖容器
window.innerHeight
window.outterWidth // 對(duì)瀏覽器
window.outterHeight
window.resizeTo(1,1) // 絕對(duì)調(diào)整
window.resizeBy(1,1) // 相對(duì)調(diào)整
  1. 導(dǎo)航和打開(kāi)窗口
window.open('http://jianshu.com','_blank') // 第二個(gè)參數(shù)可以是_self, _blank, _top, _parent, 指定名。第三個(gè)參數(shù)不細(xì)講
window.close() // 適用于用window.open()打開(kāi)的
  1. 間歇調(diào)用
var tid = setTimeout(function(){}, 1000)
clearTimeout(tid)
var iid = setInterval(function(){},1000)
clearInterval(iid)
  1. 對(duì)話框:alert() confirm() prompt() window.print() window.find() confrim返回布爾值,prompt返回輸入值

三、location對(duì)象

既是 window 對(duì)象屬性也是 document 對(duì)象屬性。
它提供了文檔相關(guān)信息以及導(dǎo)航功能。

location.hash // 返回URL的hash "#contents" 
location.host // 返回服務(wù)器名和端口
location.hostname // 返回不帶端口的服務(wù)器名
location.href // 返回當(dāng)前頁(yè)面的完整url location.toString()方法也返回這個(gè)值
location.pathname // 返回目錄和文件名
location.port // 返回端口
location.protocol // 返回協(xié)議
location.search // 返回查詢字符串 "?name=tony"

location.assign('http://jianshu.com')
window.location = 'http://jianshu.com'
location. // 三者效果一樣

location.replace('http://jianshu.com') // 不會(huì)在歷史記錄中加入新記錄,后退沒(méi)用了

location.reload() // 重載頁(yè)面 傳入?yún)?shù)true禁止緩存加載

四、 navigator 對(duì)象

識(shí)別用戶瀏覽器,先不討論

五、 screen 對(duì)象

表面客戶端能力,最主要的是顯示器信息

六、 history 對(duì)象

history.go(-1) // 后退
history.back()
history.go(1) // 前進(jìn)
history.forward()
history.length // 歷史記錄數(shù)量
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容