js BOM對象

Window對象

BOM 的核心對象是 window乒裆,它表示瀏覽器的一個實例鹤耍。在瀏覽器中验辞, window 對象有雙重角色受神,
它既是通過 JavaScript 訪問瀏覽器窗口的一個接口,又是 ECMAScript 規(guī)定的 Global 對象财著。這意味著
在網頁中定義的任何一個對象撑碴、變量和函數(shù),都以 window 作為其 Global 對象伟姐,因此有權訪問
parseInt()等方法亿卤。

瀏覽器窗口位置


用來確定和修改 window 對象位置的屬性和方法有很多排吴。 IE、 Safari屹堰、 Opera 和 Chrome 都提供了
screenLeftscreenTop 屬性街氢,分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox 則在
screenX 和 screenY 屬性中提供相同的窗口位置信息荣刑, Safari 和 Chrome 也同時支持這兩個屬性。使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置延蟹。

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

窗口大小


    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 對象是很特別的一個對象散址,因為它既是 window 對象的屬性宣赔,也是document 對象的屬性;換句話說吏祸, window.location 和 document.location 引用的是同一個對象钩蚊。location 對象的用處不只表現(xiàn)在它保存著當前文檔的信息砰逻,還表現(xiàn)在它將 URL 解析為獨立的片段,讓開發(fā)人員可以通過不同的屬性訪問這些片段丐巫。下表列出了location 對象的所有屬性(注:省略了每個屬性前面的 location 前綴) 勺美。

屬 性 名 例子 說明
hash "#contents" 返回URL中的hash(#號后跟零或多個字符)赡茸,如果URL中不包含散列祝闻,則返回空字符串
host "www.wrox.com:80" 返回服務器名稱和端口號(如果有)
hostname "www.wrox.com" 返回不帶端口號的服務器名稱
href "http:/www.wrox.com" 返回當前加載頁面的完整URL。而location對象的toString()方法也返回這個值
pathname "/WileyCDA/" 返回URL中的目錄和(或)文件名
port "8080" 返回URL中指定的端口號辙纬。如果URL中不包含端口號叭喜,則這個屬性返回空字符串
protocol "http:" 返回頁面使用的協(xié)議捂蕴。通常是http:或https:
search "?q=javascript" 返回URL的查詢字符串。這個字符串以問號開頭

查詢字符串參數(shù)

雖然通過上面的屬性可以訪問到 location 對象的大多數(shù)信息涡匀,但其中訪問 URL 包含的查詢字符串的屬性并不方便溉知。盡管 location.search 返回從問號到 URL末尾的所有內容级乍,但卻沒有辦法逐個訪問其中的每個查詢字符串參數(shù)。為此蒿囤,可以像下面這樣創(chuàng)建一個函數(shù)崇决,用以解析查詢字符串恒傻,然后返回包含所有參數(shù)的一個對象:

function getQueryStringArgs(){
    //取得查詢字符串并去掉開頭的問號
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //保存數(shù)據(jù)的對象
    args = {},
    //取得每一項
    items = qs.length ? qs.split("&") : [],
    item = null,
    name = null,
    value = null,
    //在 for 循環(huán)中使用
    i = 0,
    len = items.length;
    //逐個將每一項添加到 args 對象中
    for (i=0; i < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        }
    }
    return args;
}

位置操作

location.assign("http://www.wrox.com");

立即打開新 URL 并在瀏覽器的歷史記錄中生成一條記錄。如果是將 location.hrefwindow.location 設置為一個 URL 值盈厘,也會以該值調用 assign()方法沸手。

在這些改變?yōu)g覽器位置的方法中,最常用的是設置 location.href 屬性跳仿。

另外捐晶,修改location 對象的其他屬性也可以改變當前加載的頁面。下面的例子展示了通過將hash山上、search佩憾、 hostname、 pathname 和 port 屬性設置為新值來改變 URL澈吨。

    //假設初始 URL 為 http://www.wrox.com/WileyCDA/
    //將 URL 修改為"http://www.wrox.com/WileyCDA/#section1"
    location.hash = "#section1";
    //將 URL 修改為"http://www.wrox.com/WileyCDA/?q=javascript"
    location.search = "?q=javascript";
    //將 URL 修改為"http://www.yahoo.com/WileyCDA/"
    location.hostname = "www.yahoo.com";
    //將 URL 修改為"http://www.yahoo.com/mydir/"
    location.pathname = "mydir";
    //將 URL 修改為"http://www.yahoo.com:8080/WileyCDA/"
    location.port = 8080;

每次修改 location 的屬性(hash 除外)谅辣,頁面都會以新 URL 重新加載婶恼。

當通過上述任何一種方式修改 URL 之后,瀏覽器的歷史記錄中就會生成一條新記錄蚣录,因此用戶通過單擊“后退”按鈕都會導航到前一個頁面萎河。要禁用這種行為蕉饼,可以使用 replace()方法。這個方法只接受一個參數(shù)擎椰,即要導航到的URL创肥;結果雖然會導致瀏覽器位置改變叹侄,但不會在歷史記錄中生成新記錄。

location.reload();

重新加載頁面

navigator 對象

屬性或方法 說明 IE Firefox Safari/Chrome Opera
appCodeName 瀏覽器的名稱塔猾。通常都是Mozilla稽坤,即使在非Mozilla瀏覽器中也是如此 3.0+ 1.0+ 1.0+ 7.0+
appMinorVersion 次版本信息 4.0+ - - 9.5+
appName 完整的瀏覽器名稱 3.0+ 1.0+ 1.0+ 7.0+
appVersion 瀏覽器的版本尿褪。一般不與實際的瀏覽器版本對應 3.0+ 1.0+ 1.0+ 7.0+
buildID 瀏覽器編譯版本 - 2.0+ - -
cookieEnabled 表示cookie是否啟用 4.0+ 1.0+ 1.0+ 7.0+
cpuClass 客戶端計算機中使用的CPU類型(x86杖玲、68K、 Alpha摆马、 PPC或Other) 4.0+ - - -
javaEnabled() 表示當前瀏覽器中是否啟用了Java 4.0+ 1.0+ 1.0+ 7.0+
language 瀏覽器的主語言 - 1.0+ 1.0+ 7.0+
mimeTypes 在瀏覽器中注冊的MIME類型數(shù)組 4.0+ 1.0+ 1.0+ 7.0+
onLine 表示瀏覽器是否連接到了因特網 4.0+ 1.0+ 9.5+
opsProfile 似乎早就不用了臼闻。查不到相關文檔 4.0+
oscpu 客戶端計算機的操作系統(tǒng)或使用的CPU 1.0+
platform 瀏覽器所在的系統(tǒng)平臺 4.0+ 1.0+ .0+ 7.0+
plugins 瀏覽器中安裝的插件信息的數(shù)組 4.0+ 1.0+ 1.0+ 7.0+
preference() 設置用戶的首選項 1.5+
product 產品名稱(如 Gecko) 1.0+ 1.0+
productSub 關于產品的次要信息(如Gecko的版本) 1.0+ 1.0+
register-ContentHandler() 針對特定的MIME類型將一個站點注冊為處理程序 2.0+
register-ProtocolHandler() 針對特定的協(xié)議將一個站點注冊為處理程序 2.0
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市囤采,隨后出現(xiàn)的幾起案子述呐,更是在濱河造成了極大的恐慌,老刑警劉巖蕉毯,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乓搬,死亡現(xiàn)場離奇詭異,居然都是意外死亡代虾,警方通過查閱死者的電腦和手機进肯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門棉磨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來江掩,“玉大人,你說我怎么就攤上這事乘瓤』沸危” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵馅扣,是天一觀的道長斟赚。 經常有香客問我,道長差油,這世上最難降的妖魔是什么拗军? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮蓄喇,結果婚禮上发侵,老公的妹妹穿的比我還像新娘。我一直安慰自己妆偏,他們只是感情好刃鳄,可當我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钱骂,像睡著了一般叔锐。 火紅的嫁衣襯著肌膚如雪挪鹏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天愉烙,我揣著相機與錄音讨盒,去河邊找鬼。 笑死步责,一個胖子當著我的面吹牛返顺,可吹牛的內容都是我干的。 我是一名探鬼主播蔓肯,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼遂鹊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔗包?” 一聲冷哼從身側響起秉扑,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎气忠,沒想到半個月后邻储,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡旧噪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年吨娜,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淘钟。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡宦赠,死狀恐怖,靈堂內的尸體忽然破棺而出米母,到底是詐尸還是另有隱情勾扭,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布铁瞒,位于F島的核電站妙色,受9級特大地震影響,放射性物質發(fā)生泄漏慧耍。R本人自食惡果不足惜身辨,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望芍碧。 院中可真熱鬧煌珊,春花似錦、人聲如沸泌豆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蔬浙,卻和暖如春猪落,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背敛滋。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工许布, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兴革,地道東北人绎晃。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像杂曲,于是被迫代替她去往敵國和親庶艾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內容