文章出處

BOM是browser object model的縮寫,簡稱瀏覽器對象模型。先看看下面這張圖

window對象是BOM的頂層(核心)對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。

通過圖可以看出 平時經常用到的一些對象都是BOM對象。

下面將一一為您介紹 這些子對象的用途。

一  window對象

window對象除了是BOM中所有對象的父對象外,還包含一些窗口控制函數。

JavaScript中的任何一個全局函數或變量都是window的屬性。如下代碼中的全局變量sTest

1 var sTest="dreamdu";
2 document.write(sTest==window.sTest);

由于sTest是全局變量,因此可以通過window.sTest訪問這個變量

window函數索引:

1. 窗體控制函數

    • JavaScript moveBy()  從當前位置水平移動窗體x個像素,垂直移動窗體y個像素,x為負數,將向左移動窗體,y為負數,將向上移動窗體
    • JavaScript moveTo() 移動窗體左上角到相對于屏幕左上角的(x,y)點,當使用負數做為參數時會吧窗體移出屏幕的可視區域
    • JavaScript resizeBy() 相對窗體當前的大小,寬度調整w個像素,高度調整h個像素。如果參數為負值,將縮小窗體,反之擴大窗體
    • JavaScript resizeTo() 把窗體寬度調整為w個像素,高度調整為h個像素

2. 窗體滾動軸控制函數

    • JavaScript scrollTo() 在窗體中如果有滾動條,將橫向滾動條移動到相對于窗體寬度為x個像素的位置,將縱向滾動條移動到相對于窗體高度為y個像素的位置
    • JavaScript scrollBy() 如果有滾動條,將橫向滾動條移動到相對于當前橫向滾動條的x個像素的位置(就是向左移動x像素),將縱向滾動條移動到相對于當前縱向滾動條高度為y個像素的位置(就是向下移動y像素)

3. 窗體焦點控制函數

    • JavaScript focus() 使窗體或控件獲取焦點
    • JavaScript blur() 與focus函數相反,使窗體或控件失去焦點

4. 新建窗體函數

    • JavaScript open() 打開(彈出)一個新的窗體
    • JavaScript close() 關閉窗體
    • JavaScript opener 實際上就是通過window.open打開的窗體的父窗體。通過opener可以實現跨窗體之間的通訊,但是要保證是在同一域名下,而且一個窗體要包含另一個窗體的opener。

5. 對話框函數

6. 狀態欄屬性

    • JavaScript window.defaultStatus 屬性
    • JavaScript window.status 屬性

7. 時間等待與間隔函數

二  document對象

document對象是window對象的屬性,document對象包含一個節點對象,此對象包含每個單獨頁面的所有HTML元素,這就是W3C的DOM對象。

document屬性

    • cookie -- 用戶cookie
    • title -- 當前頁面title標簽中定義的文字
    • URL -- 當前頁面的URL

由于document代表HTML文檔的內容,因此可以通過它表示文檔中加載的一些元素,這些元素全部通過集合訪問。

    • anchors -- 文檔中所有錨(a name="aname")的集合
    • applets -- 文檔中所有applet標簽表示的內容的集合
    • embeds -- 文檔中所有embed標簽表示的內容的集合
    • forms -- 文檔中所有form標簽表示的內容的集合
    • images -- 文檔中所有image標簽表示的內容的集合
    • links -- 文檔中所有a(鏈接)標簽表示的內容的集合

document函數

    • JavaScript write() 在文檔中寫入字符串
    • JavaScript writeln() 函數
    • JavaScript document.open() 打開已經載入的文檔。代碼示例
      1 var win = window.open("about:blank","dreamdu");
      2 win.document.open();
      3 win.document.write("welcome to dreamdu!");
      4 win.document.close();

      上面這個示例首先新建一個空白文檔,并打開open,寫入內容,最后完成顯示關閉文檔close。

    • JavaScript document.close() 函數

三 frames對象

frames用于表現HTML頁面當前窗體的中的框架集合。

如果頁面使用框架,將產生一個框架集合frames,在集合中可用數字(從0開始,從左到右,逐行索引)或名字索引框架

<iframe id="color_iframe" src="" frameborder="0" scrolling="no" style="text-align: center;"></iframe>

如上代碼可以選擇一個框架 var iframeDocument = window.frames["color_iframe"].contentWindow.document;

四 history對象

瀏覽者通常可以使用瀏覽器的前進與后退按鈕訪問曾經瀏覽過的頁面。JavaScript的history對象記錄了用戶曾經瀏覽過的頁面,并可以實現瀏覽器前進與后退相似的導航功能

可以通過back函數后退一個頁面,forward函數前進一個頁面,或者使用go函數任意后退或前進頁面,還可以通過length屬性查看history對象中存儲的頁面數

由于安全的原因,不能顯示history對象中的歷史頁面URL

history對象函數

五  location對象

location用于獲取或設置窗體的URL,并且可以用于解析URL,是BOM中最重要的對象之一。location的8個屬性都是可讀寫的,但是只有href與hash的才有意義。例如改變location.href會重新定位到一個URL,而修改location.hash會跳到當前頁面中的anchor(<a id="name">或者<div id="id">等)名字的標記(如果有),而且頁面不會被重新加載。

location對象屬性圖示

location屬性

    • JavaScript hash 屬性 -- 返回URL中#符號后面的內容
    • JavaScript host 屬性 -- 返回域名
    • JavaScript hostname 屬性 -- 返回主域名
    • JavaScript href 屬性 -- 返回當前文檔的完整URL或設置當前文檔的URL
    • JavaScript pathname 屬性 -- 返回URL中域名后的部分
    • JavaScript port 屬性 -- 返回URL中的端口
    • JavaScript protocol 屬性 -- 返回URL中的協議
    • JavaScript search 屬性 -- 返回URL中的查詢字符串
    • JavaScript assign() 函數 -- 設置當前文檔的URL
    • JavaScript replace() 函數 -- 設置當前文檔的URL,并在history對象的地址列表中刪除這個URL
    • JavaScript reload() 函數 -- 重新載入當前文檔(從server服務器端)
    • JavaScript toString() 函數 -- 返回location對象href屬性當前的值

六  navigator對象

navigator對象通常用于檢測瀏覽器與操作系統的版本。navigator中最重要的是userAgent屬性,返回包含瀏覽器版本等信息的字符串,其次cookieEnabled也很重要,使用它可以判斷用戶瀏覽器是否開啟cookie。

常用的navigator屬性

    • appCodeName -- 瀏覽器代碼名的字符串表示
    • appName -- 官方瀏覽器名的字符串表示
    • appVersion -- 瀏覽器版本信息的字符串表示
    • cookieEnabled -- 如果啟用cookie返回true,否則返回false
    • javaEnabled -- 如果啟用java返回true,否則返回false
    • platform -- 瀏覽器所在計算機平臺的字符串表示
    • plugins -- 安裝在瀏覽器中的插件數組
    • taintEnabled -- 如果啟用了數據污點返回true,否則返回false
    • userAgent -- 用戶代理頭的字符串表示

七  screen對象

screen對象用于獲取用戶的屏幕信息。

screen對象屬性

    • JavaScript availHeight 屬性 -- 窗口可以使用的屏幕高度,單位像素
    • JavaScript availWidth 屬性 -- 窗口可以使用的屏幕寬度,單位像素
    • JavaScript colorDepth 屬性 -- 用戶瀏覽器表示的顏色位數,通常為32位(每像素的位數)
    • JavaScript pixelDepth 屬性 -- 用戶瀏覽器表示的顏色位數,通常為32位(每像素的位數)(IE不支持此屬性)
    • JavaScript height 屬性 -- 屏幕的高度,單位像素
    • JavaScript width 屬性 -- 屏幕的寬度,單位像素

availWidth與availHeight屬性非常有用,例如:可以使用下面的代碼填充用戶的屏幕:

1 window.moveTo(0,0);
2 window.resizeTo(screen.availWidth, screen.availHeight);

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()