摘要:知識總結在中使用,瀏覽器對象模型是其核心對象的所有對象都存在于一個運行環境之中,這個運行環境本身也是對象,稱為頂層對象。如果中不包含端口號,則這個屬性返回空字符串返回頁面使用的協議。
BOM知識總結
在web中使用JavaScript,BOM(瀏覽器對象模型)是其核心
window對象JavaScript的所有對象都存在于一個運行環境之中,這個運行環境本身也是對象,稱為“頂層對象”。
這就是說,JavaScript的所有對象,都是“頂層對象”的下屬。不同的運行環境有不同的“頂層對象”,在瀏覽器環境中,這個頂層對象就是window對象。
window對象同時扮演ECMAScript中Global對象的角色,因此所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。
窗口的大小和位置 位置全局變量不能通過delete操作符刪除,而直接在window對象上定義的屬性可以。
IE、Safari、Opera、Chrome都提供了 screenLeft和screenTop屬性,分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息(Safari和Chrome也同樣支持)。
大小window.innerHeight和window.innerWidth
返回網頁在當前窗口中可見部分的高度和寬度,即“視口”(viewport),單位為像素。當用戶放大網頁的時候(比如將網頁從100%的大小放大為200%),這兩個屬性會變小。因為這時網頁的像素大小不變,只是每個像素占據的屏幕空間變大了,因為可見部分(視口)就變小了。注意,這兩個屬性值包括滾動條的高度和寬度。
window.outerHeight和window.outerWidth
返回瀏覽器窗口的高度和寬度,包括瀏覽器菜單和邊框,單位為像素。
JS是單線程語言,但它允許通過設置超時值和間歇時間來調度代碼在特定的時刻執行。
setIntervalwindow對象的setInterval方法用來實現一個函數在指定毫秒數的間隔里重復調用。setInterval返回一個值,這個值可以傳遞給clearInterval用于取消這個函數的執行。
var num = 0, max = 10, intervalId; function incrementNumber() { num ++; if (num == max){ clearInterval(intervalId); alert("ok"); } } intervalId = setInterval(incrementNumber,500);setTimeout
window對象的setTimeout方法用來實現一個函數在指定的毫秒數之后運行。setTimeout返回一個值,這個值可以傳遞給clearTimeout用于取消這個函數的執行。
var num = 0, max = 10; function incrementNumber() { num ++; if (num < max){ setTimeout(incrementNumber,500); } else { alert("ok"); } } setTimeout(incrementNumber,500);
frame如果以0毫秒的超時時間來調用setTimeout ( ) ,那么指定的函數不會立即執行。相反,會把它放到隊列中,等到前面處于等待狀態的事件處理程序全部執行完畢后,再“立即”調用它。
window.frames屬性返回一個類似數組的對象,成員為頁面內所有框架窗口,包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架窗口,window.frames["someName"]則是根據框架窗口的name屬性的值(不是id屬性),返回該窗口。
傳統的frame已被廢棄,由所創建的嵌套瀏覽上下文是用它自己的Window對象所表示的。
var iframe = window.getElementsByTagName("iframe")[0]; var iframe_title = iframe.contentWindow.title;導航和彈出窗口
window.open ( ) 方法既可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口。
這個方法接受四個參數:要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。
例如:
var popup = window.open( "somepage.html", "DefinitionsWindows", "height=200,width=200,location=no,resizable=yes,scrollbars=yes" );
window.close方法用于關閉當前窗口,一般用來關閉window.open方法新建的窗口。
window.closed屬性用于檢查當前窗口是否被關閉了。
新創建的window對象有一個opener屬性,其中保存著打開它的原始窗口對象
系統對話框瀏覽器通過alert ( ) 、confirm ( ) 、prompt ( ) 方法可以調用系統對話框向用戶顯示消息。系統對話框與在瀏覽器中顯示的網頁沒有關系,也不包含HTML。它們的外觀由操作系統及瀏覽器設置決定,而不是由css決定。
這幾個方法打開的對話框都是同步和模態的。顯示這些對話框的時候代碼會停止執行,而關掉這些對話框后代碼又會恢復執行。
alert ( ) 這個方法彈出的對話框,只有一個“確定”按鈕,往往用來通知用戶某些信息。
confirm ( ) 會顯示確認與取消按鈕,兩個按鈕可以讓用戶決定是否執行給定的操作
prompt ( ) 用于提示用戶輸入一些文本
URL的解碼/編碼方法decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
Location對象Location對象是一個很特別的對象,它既是window對象的屬性,也是document對象的屬性;換句話說window.location和document.location引用的是用一個對象。
window.location === document.location
location對象的用處不只是表現在它保存著當前文檔的信息,還表現在它將URL解析為獨立的片段,讓開發人員可以通過不同的屬性訪問這些片段。
屬性名 | 例子 | 說明 |
---|---|---|
hash | "#contents" | 返回URL中的hash(#號后跟零或多個字符),如果URL中不包含散列,則返回空字符串 |
host | "www.jikexueyuan.com:80" | 返回服務器名稱和端口號 |
hostname | "www.jikexueyuan.com" | 返回不帶端口號的服務器名稱 |
href | "http:// www.jikexueyuan.com" | 返回當前加載頁面的完整URL。而Location對象的toString()方法也返回這個值 |
pathname | "/my/" | 返回URL中的目錄和文件名 |
port | "8080" | 返回URL中制定的端口號。如果URL中不包含端口號,則這個屬性返回空字符串 |
protocol | "http:" | 返回頁面使用的協議。通常是http:或https: |
search | "?q=javascript" | 返回URL的查詢字符串。這個字符串以問好開頭 |
盡管location.search返回從問好到URL末尾的所有內容,但卻沒有辦法逐個訪問其中的每個查詢字符串參數。可以才用decodeURIComponent來解析
History對象如果調用reload ( ) 時不傳入任何參數,頁面就會以最有效的方式重新加載。
瀏覽器窗口有一個history對象,用來保存瀏覽歷史,從窗口被打開的那一刻算起。history是window對象的屬性,因此每個瀏覽器窗口、每個標簽頁乃至每個框架,都有自己的history對象與特定的window對象關聯。
history對象提供了一系列方法,允許在瀏覽歷史之間移動。
back ( ) :移動到上一個訪問頁面,等同于瀏覽器的后退鍵。
forward():移動到下一個訪問頁面,等同于瀏覽器的前進鍵。
go ( ) :接受一個整數作為參數,移動到該整數指定的頁面,比如go(1)相當于forward(),go(-1)相當于back()。
history對象有一個length屬性,保存著歷史記錄的數量。
HTML5為history提供了兩個新方法,history.pushState ( ) 和history.replaceState ( ) ,用來在瀏覽器歷史中添加和修改記錄。所有主流瀏覽器都支持該方法(包括IE10)。
它們接受三個參數,依次為:
state:一個與指定網址相關的狀態對象,popstate事件觸發時,該對象會傳入回調函數。如果不需要這個對象,此處可以填null。
title:新頁面的標題,但是所有瀏覽器目前都忽略這個值,因此這里可以填null。
url:新的網址,必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
它的state屬性保存當前頁面的state對象
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "2.html"); history.state // { foo: "bar" }Navigator對象與Screen對象
Window對象的navigator屬性,指向一個包含瀏覽器相關信息的對象。
window.screen對象包含了顯示設備的信息。screen.height和screen.width兩個屬性,一般用來了解設備的分辨率。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86318.html
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:基礎鞏固基礎總結使用已經好幾年了,由于工作主要是做服務端開發,在工作中逐漸發現的使用范圍原來越廣泛。這里要注意,務必將基礎部分掌握牢靠,磨刀不誤砍柴功,只有將基礎部分掌握并建立起系統的知識體系,在后面學習衍生的其他模式才能游刃有余。 基礎鞏固:JavaScript基礎總結 使用JavaScript已經好幾年了,由于工作主要是做服務端開發,在工作中逐漸發現JavaScript的使用范圍原...
摘要:何時只要讓程序延遲執行一件事時如何件事啟動定時器讓程序等待毫秒后,自動執行一次,執行后自動停止停止定時器定時器原理定時器中的任務函數,必須等待主程序所有語句執行后,才能執行。將事件監聽對象加入到瀏覽器的監聽隊列中。 前端知識點總結——BOM 1.BOM: Browser Object Model 什么是: 專門操作瀏覽器窗口的API 沒有標準, 導致瀏覽器兼容性問題 包括: w...
摘要:最近遇到的前端面試題更新版前端掘金個人博客已上線,歡迎前去訪問評論無媛無故的個人博客以下內容非本人原創,是整理后覺得更容易理解的版本,歡迎補充。 一道面試題引發的對 javascript 類型轉換的思考 - 前端 - 掘金 最近群里有人發了下面這題:實現一個函數,運算結果可以滿足如下預期結果: ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金 從原博客遷移...
摘要:最近遇到的前端面試題更新版前端掘金個人博客已上線,歡迎前去訪問評論無媛無故的個人博客以下內容非本人原創,是整理后覺得更容易理解的版本,歡迎補充。 一道面試題引發的對 javascript 類型轉換的思考 - 前端 - 掘金 最近群里有人發了下面這題:實現一個函數,運算結果可以滿足如下預期結果: ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金 從原博客遷移...
閱讀 3690·2021-09-07 10:19
閱讀 3633·2021-09-03 10:42
閱讀 3588·2021-09-03 10:28
閱讀 2555·2019-08-29 14:11
閱讀 814·2019-08-29 13:54
閱讀 1601·2019-08-29 12:14
閱讀 421·2019-08-26 12:12
閱讀 3619·2019-08-26 10:45