高程3總結#第8章BOM

時間 2019-11-08

標籤高程總結 bom 简体版

原文原文鏈接

BOM

window對象

BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是經過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。這覺得着在網頁中定義的任何一個對象、變量和函數，都是以window做爲其Global對象，所以有權訪問parseInt()等方法。

全局做用域

var age=29;
function sayAge(){
  alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29

全局變量不能經過delete操做符刪除，而直接在window對象上的定義的屬性能夠javascript

var age=29;
window.color="red";
//在IE<9時拋出錯誤，在其餘全部瀏覽器中都返回false
delete window.age;
//在IE<9時拋出錯誤，在其餘全部瀏覽器中都返回true
delete window.color;//return true
alert(window.age);//29
alert(window.color);//undefined

嘗試訪問未聲明的變量會拋出錯誤，可是經過查詢window對象，能夠知道某個可能未聲明的變量是否存在html

//這裏會拋出錯誤，由於oldValue未定義
var newValue=oldValue
//這裏不會拋出錯誤，由於這是一次屬性查詢
//newValue的值是undefined
var newValue=window.oldValue

窗口關係及框架

若是頁面中包含框架，則每一個框架都擁有本身的window對象，而且保存在frames集合中java

<html>
  <head>
    <title>Frameset Example</title>
  </head>
  <frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
      <frame src="anotherframe.htm" name="leftFrame">
      <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
  </frameset>
</html>

在使用框架的狀況下，瀏覽器中會存在多個Global對象。在每一個框架中定義的全局變量會自動成爲框架中window對象的屬性。因爲每一個window對象都包含原生類型的構造函數，所以每一個框架都有一套本身的構造函數，這些構造函數一一對應，但並不相等。

窗口位置

screenLeft()和screenTop()屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置數組

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

moveTo()接收的是新位置的x和y的座標值，而moveBy()接收的是在水平和垂直方向上移動的像素數瀏覽器

//將窗口移動到屏幕左上角
window.moveTo(0,0);
//將窗口向下移動100像素
window.moveBy(0,100);
//將窗口移動到(200,300)
window.moveTo(200,300);
//將窗口向左移動50像素
window.moveBy(-50,0)

這兩個方法可能會被瀏覽器禁用。這兩個方法不適用於框架，只能對最外層的window對象使用

窗口大小

在IE9+、Safari和FireFox中，outerWidth和outerHeight返回瀏覽器窗口自己的尺寸。在Opera中，這兩個屬性的值表示頁面視圖容器的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區的大小。在Chrome中，outerWidth、outerHeight與innerWidth、innerHeight返回相同的值，即視口大小而非瀏覽器窗口大小。
使用resizeTo()和resizeBy()方法能夠調整瀏覽器窗口的代銷。這兩個方法都接收兩個參數，其中resizeTo()接收瀏覽器窗口的新寬度和高度，而resizeBy()接收新窗口與原窗口的寬度和高度之差。框架
```
//調整到100X100
window.resizeTo(100,100);
//調整到200X150
window.resizeBy(100,50)
//調整到300X300
window,resizeTo(300,300)
```
- 這兩種方法也有可能被瀏覽器禁用

導航和打開窗口

window.open()方法既能夠導航到一個特定的URL，也能夠打開一個新的瀏覽器窗口
這個方法接收4個參數：要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只需傳遞第一個參數，最後一個參數只在不打開新窗口的狀況下使用。
若是爲window.open()傳遞了第二個參數，並且該參數是已有窗口或框架的名稱，那麼就會在具備該名稱的窗口或框架中加載第一個參數指定的URL。
若是給 window.open() 傳遞的第二個參數並非一個已經存在的窗口或框架，那麼該方法就會根據在第三個參數位置上傳入的字符串建立一個新窗口或新標籤頁。若是沒有傳入第三個參數，那麼就會打開一個帶有所有默認設置（工具欄、地址欄和狀態欄等）的新瀏覽器窗口（或者打開一個新標籤頁根據瀏覽器設置）。
第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性。

間歇調用和超時調用

容許經過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者是在指定的時間事後執行代碼，後者是每隔指定的時間就執行一次代碼。
超時調用setTimeout()，接收兩個參數：要執行的代碼和以毫秒錶示的時間。
間歇調用與超時調用相似，只不過它會按照指定的時間間隔重複執行代碼，直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval()，它接收的參數與setTimeout()相同

系統對話框

瀏覽器經過alert()、confirm()和prompt()方法能夠調用系統對話框向用戶顯示消息。
alert()方法，這個方法接受一個字符串並將其展現給用戶。調用alert()方法的結果就是想用戶顯示一個系統對話框，其中包含指定文本和一個OK("肯定")按鈕
confirm()方法，像是一個"警告"對話框。除了顯示"肯定"按鈕以外，還會顯示一個Cancel("取消")按鈕，兩個按鈕可讓用戶決定是否執行給定的操做函數
```
if (confirm("Are you sure?")) {
  alert("I'm so glad you're sure! ");
} else {
  alert("I'm sorry to hear you're not sure. ");
}
```
prompt()方法，生成提示框，用於提示用戶輸入一些文本。除了顯示OK和Cancel按鈕以外，還會顯示一個文本提示域。默認接收兩個參數，要顯示給用戶的文本提示和文本輸入域的默認值

location對象

查詢字符串參數

建立函數，解析查詢字符串，返回包含全部參數的一個對象工具

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 對象能夠經過不少方式來改變瀏覽器的位置。首先，也是最經常使用的方式，就是使用assign() 方法併爲其傳遞一個 URL。ui
```
location.assign("http://www.wrox.com");
```

下面兩行代碼與顯式調用assign()方法的效果徹底同樣this

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

//假設初始 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

navigator對象

檢測插件

非IE瀏覽器可使用plugins數組來達到這個目的

name，插件的名字
description，插件的描述
filename，插件的文件名
length，插件所處理的MIME類型數量

//檢測插件（在 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"));
//檢測 QuickTime
alert(hasPlugin("QuickTime"));

註冊處理程序

registerContentHandler() 和 registerProtocolHandler() 方法。這兩個方法可讓一個站點指明它能夠處理特定類型的信息。

screen對象

screen對象基本上只用來代表客戶端的能力，其中包括瀏覽器窗口外部的顯示器的信息，如像素的寬度高度等

history對象

使用 go() 方法能夠在用戶的歷史記錄中任意跳轉，能夠向後也能夠向前。這個方法接受一個參數，表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉（相似於單擊瀏覽器的「後退」按鈕），正數表示向前跳轉（相似於單擊瀏覽器的「前進」按鈕）。
```
//後退一頁
history.go(-1);
//前進一頁
history.go(1);
//前進兩頁
history.go(2);
```
也能夠給 go() 方法傳遞一個字符串參數，此時瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置——可能後退，也可能前進，具體要看哪一個位置最近。若是歷史記錄中不包含該字符串，那麼這個方法什麼也不作，
```
//跳轉到最近的 wrox.com 頁面
history.go("wrox.com");
//跳轉到最近的 nczonline.net 頁面
history.go("nczonline.net");
```
還可使用兩個簡寫方法 back() 和 forward() 來代替 go() 。
```
//後退一頁
history.back();
//前進一頁
history.forward();
```

history 對象還有一個 length 屬性，保存着歷史記錄的數量。

if (history.length == 0){
  //這應該是用戶打開窗口後的第一個頁面
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。