javascript
javascript的浏览器Bom详解,window、location、history对象
? ? ? ?BOM(BrowserObjectModel)也叫瀏覽器對象模型,描述與瀏覽器進行交互的方法和接口。BOM由多個對象組成,
其中代表瀏覽器窗口的Window對象是BOM的頂層對象,其他對象都是該對象的子對象。
? ? ? ?JavaScript由三部分組成:ECMAScript,BOM,DOM。BOM提供了很多對象,用于訪問瀏覽器的功能。
下面介紹瀏覽器的三個公共對象:window對象,location對象,history對象。
window對象
BOM?的核心對象是window,它表示瀏覽器的一個實例。在瀏覽器中,window 對象有雙重角色,
它既是通過JavaScript 訪問瀏覽器窗口的一個接口,又是ECMAScript 規定的Global 對象。這意味著
在網頁中定義的任何一個對象、變量和函數,都以window 作為其Global 對象
window對象的比較常用的知識點:全局作用域、窗口寬高、窗口位置、定時器的設置
獲取窗口大小
通過以下代碼可以跨瀏覽器獲取頁面視口大小
var pageWidth = window.innerWidth,pageHeight = window.innerHeight; if(typeof pageWidth !="number"){if (document.compatMode == "CSS1Compat"){pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;}else {pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;} }
location對象
location?是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息,還提供了一些導航功能
以下是location對象的屬性列表.
hash?返回URL中的hash(#號后跟零或多個字符),如果URL中不包含散列,則返回空字符串,例"#contents"
host?返回服務器名稱和端口號(如果有).例"www.zhaosywz.com:80"
hostname?返回不帶端口號的服務器名稱.例"www.zhaosywz.com"
href?返回當前頁面的完整url.例"www.zhaosywz.com/index.html"
pathname?返回url中的目錄或文件名,例"/category/shoes"
port?返回url的端口號,如果沒有則返回空字符串.例"8080"
protocol?返回頁面使用的協議。通常是http:或https:
search?返回URL的查詢字符串。這個字符串以問號開頭,'?id=100
通過以下任何一種方式都會導致頁面的跳轉或重載
location.href =?"http://www.baidu.com"; location.hash =?"#section1"; location.search =?"?q=javascript"; location.hostname =?"www.yahoo.com"; location.pathname =?"mydir"; location.port =?8080;通過reload()可以重新加載當前頁面
location.reload(); //重新加載(有可能從緩存中加載) location.reload(true);//重新加載(直接從服務器加載)?
history對象
history 對象保存著用戶上網的歷史記錄,從窗口被打開的那一刻算起。
//后退一頁 history.go(-1);//前進一頁 history.go(1);//前進兩頁 history.go(2); //跳轉到最近的包含'wrox.com'字符的頁面 history.go("wrox.com"); //后退一頁 history.back(); //前進一頁 history.forward(); if (history.length == 0){ //這應該是用戶打開窗口后的第一個頁面 }history對象是window對象的屬性,它保存著用戶上網的記錄,從窗口被打開的那一刻算起
?
?
轉載于:https://www.cnblogs.com/suzhen-2012/p/5849994.html
總結
以上是生活随笔為你收集整理的javascript的浏览器Bom详解,window、location、history对象的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: (小议)面向对象
- 下一篇: javascript数据结构-栈