摘要:在瀏覽器中,對象有雙重角色,它既是通過訪問瀏覽器窗口的一個接口,又是規定的對象。在集合中,可以通過數值索引從開始,從左至右,從上到下或者框架名稱來訪問相應的對象。
ECMAScript 是JavaScript 的核心,但如果要在Web 中使用JavaScript,那么BOM(瀏覽器對象模
型)則無疑才是真正的核心。BOM 提供了很多對象,用于訪問瀏覽器的功能,這些功能與任
何網頁內容無關.
BOM 的核心對象是window,它表示瀏覽器的一個實例。在瀏覽器中,window 對象有雙重角色,
它既是通過JavaScript 訪問瀏覽器窗口的一個接口,又是ECMAScript 規定的Global 對象。這意味著
在網頁中定義的任何一個對象、變量和函數,都以window 作為其Global 對象
由于 window 對象同時扮演著ECMAScript 中Global 對象的角色,因此所有在全局作用域中聲明
的變量、函數都會變成window 對象的屬性和方法
var age = 29; function sayAge(){ alert(this.age); } alert(window.age); //29 sayAge(); //29 window.sayAge(); //29
全局變量不能通過delete 操作符刪除,而直接在window 對象上的定義的屬性可以
var age = 29; window.color = "red"; //在IE < 9 時拋出錯誤,在其他所有瀏覽器中都返回false delete window.age; //在IE < 9 時拋出錯誤,在其他所有瀏覽器中都返回true delete window.color; //returns true alert(window.age); //29 alert(window.color); //undefined
嘗試訪問未聲明的變量會拋出錯誤,但是通過查詢window 對象,可以知道某個可能未聲明的變量是否存在
//這里會拋出錯誤,因為oldValue 未定義 var newValue = oldValue; //這里不會拋出錯誤,因為這是一次屬性查詢 //newValue 的值是undefined var newValue = window.oldValue;窗口關系及框架
如果頁面中包含框架,則每個框架都擁有自己的window 對象,并且保存在frames 集合中。在frames
集合中,可以通過數值索引(從0 開始,從左至右,從上到下)或者框架名稱來訪問相應的window 對
象。每個window 對象都有一個name 屬性,其中包含框架的名稱
Frameset Example
以上代碼創建了一個框架集,其中一個框架居上,兩個框架居下。對這個例子而言,可以通過
window.frames[0]或者window.frames["topFrame"]來引用上方的框架。不過,恐怕你最好使用
top 而非window 來引用這些框架(例如,通過top.frames[0]),top 對象始終指向最高(最外)層的框架,也就是瀏覽器窗口,與top相對的是parent,parent指向的是父框架
使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置。
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;系統對話框
系統對話框有三個,分別為:alert,confirm,prompt.
alert為系統提示框
alert("nice to meet you");
confirm為確認框
var sure = confirm("are you have a good time ?"); if(sure){ alert("yes, you have a good time !"); }
prompt為系統輸入框
var getname = prompt("what"s you name ?","name");//參數1為提示語, 參數2為默認字符. alert(getname);間歇調用和超時調用
間歇調用使用setTimeout方法,超時調用使用setInterval方法
這兩個方法都有兩個參數,第一個參數為執行的代碼或函數,第二個參數為執行時間.
當然這兩種調用也有對應的方法來清除調用.
setTimeout(function(){ alert("good morning!"); },1000); //一秒后彈出彈框. var count = 0; var interval = setInterval(function(){ count++; if(count > 10){ clearInterval(interval); //清除間歇調用 } },1000);
setInterval有個不足之處是后一個間歇調用可能會在前一個間歇調用結束之前啟動,因此使用setTimeout來模擬setInterval是不錯的選擇.
var count = 0; function doSoming(){ count ++; if(count<=10){ setTimeout(doSoming,1000); } } setTimeout(doSoming,1000);獲取窗口大小
通過以下代碼可以跨瀏覽器獲取頁面視口大小
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"
盡管"search"屬性可以返回查詢字符串,但為了更加方便的訪問其參數,可以通過下面的代碼將其轉化為包含參數的對象.
function getQueryStringArgs(){ //取得查詢字符串并去掉開頭的問號 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //保存數據的對象 args = {}, //取得每一項 items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //在for 循環中使用 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.;
location.hash = "#section1";
location.search = "?q=javascript";
location.hostname = "www.yahoo.com";
location.pathname = "mydir";
location.port = 8080;
通過reload()可以重新加載當前頁面
location.reload(); //重新加載(有可能從緩存中加載) location.reload(true);//重新加載(直接從服務器加載)navigator對象
最早由 Netscape Navigator 2.0 引入的navigator 對象,現在已經成為識別客戶端瀏覽器的事實標準,navigator有以下跨瀏覽器屬性和方法.
appCodeName 瀏覽器的名稱。通常都是Mozilla,即使在非Mozilla瀏覽器中也是如此
appName 完整的瀏覽器名稱
appVersion 瀏覽器版本,一般不與實際的瀏覽器版本對應.
cookieEnabled 表示cookie是否啟用
javaEnabled() 表示單簽瀏覽器是否啟用Java
onLine 表示瀏覽器是否連接到了因特網
mimeTypes 在瀏覽器中注冊的MIME類型數組
platform 瀏覽器的系統平臺
plugins 瀏覽器中安裝的插件信息的數組
userAgent 瀏覽器用戶代理字符串
userAgent是最常用的屬性.
插件檢測
//檢測插件(在IE 中無效) function hasPlugin(name){ name = name.toLowerCase(); for (var i=0; i < navigator.plugins.length; i++){ if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){ return true; } } return false; } //檢測Flash alert(hasPlugin("Flash"));
//檢測IE 中的插件 function hasIEPlugin(name){ try { new ActiveXObject(name); return true; } catch (ex){ return false; } } //檢測Flash alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));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){ //這應該是用戶打開窗口后的第一個頁面 }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86096.html
摘要:里面的對象是什么是瀏覽器對象,全拼為都有什么對象是中的頂級對象,所有定義在全局作用域中的變量函數都會變成對象的屬性和方法,在調用的時候可以省略。 js里面的Bom對象 showImg(https://segmentfault.com/img/remote/1460000010691602); Bom是什么? Bom是瀏覽器對象,全拼為Browser Object Model Bom都有...
摘要:一對象獲取獲取服務器名稱和端口號獲取服務器名稱和端口號獲取服務器名稱和端口號獲取不帶端口號的服務器名稱獲取不帶端口號的服務器名稱獲取整個獲取整個返回中的目錄和或文件名返回中的目錄和或文件名返回的端口號返回的端口號返回的協議返回的協議返回的查 一、location對象 http://localhost:8881/javascript/BOM/window.html?name=bob&ag...
閱讀 1718·2021-10-18 13:34
閱讀 3906·2021-09-08 10:42
閱讀 1551·2021-09-02 09:56
閱讀 1606·2019-08-30 15:54
閱讀 3127·2019-08-29 18:44
閱讀 3298·2019-08-26 18:37
閱讀 2212·2019-08-26 12:13
閱讀 454·2019-08-26 10:20