1. 程式人生 > >《Javascript 高階程式設計(第三版)》筆記0xD BOM location、navigator、screen、history

《Javascript 高階程式設計(第三版)》筆記0xD BOM location、navigator、screen、history

目錄

location 物件

     查詢字串引數

    位置操作

         replace()

        reload()

     檢測外掛

    註冊處理程式

        registerContentHandler()

         registerProtocolHandler()

screen 物件

history 物件


location 物件

        location 物件是很特別的一個物件,既是 window 物件的屬性,也是document 物件的屬性;或者說說window.location 和 document.location 引用的是同一個物件。location 物件的用處不只表現在它儲存著當前文件的資訊,還表現在它將 URL 解析為獨立的片段,讓開發人員可以通過不同的屬性訪問這些片段。

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;
}

//假設查詢字串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"

    位置操作

        每次修改 location 的屬性(hash 除外),頁面都會以新 URL 重新載入

//開啟新 URL 並在瀏覽器的歷史記錄中生成一條記錄
location.assign("http://www.wrox.com");

//相當於
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;

         replace()

<!--不會在歷史記錄中生成新記錄。在呼叫 replace()方法之後,使用者不能回到前一個頁面-->
<!DOCTYPE html>
<html>
	<head>
		<title>You won't be able to get back here</title>
	</head>
	<body>
		<p>Enjoy this page for a second, because you won't be coming back here.</p>
		<script type="text/javascript">
			setTimeout(function () {
			location.replace("http://www.wrox.com/");
			}, 1000);
		</script>
	</body>
</html>

        reload()

//重新載入當前顯示的頁面。如果呼叫 reload()時不傳遞任何引數,頁面就會以最有效的方式重新載入。
location.reload(); //重新載入(有可能從快取中載入)
location.reload(true); //重新載入(從伺服器重新載入)

navigator 物件

navigator存在於所有瀏覽器中的屬性和方法

     檢測外掛

//檢測外掛(在 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()

//將一個站點註冊為處理 RSS 源的處理程式
navigator.registerContentHandler("application/rss+xml",
	"http://www.somereader.com?feed=%s", "Some Reader");

         registerProtocolHandler()

//註冊一個 mailto 協議的處理程式,該程式指向一個基於 Web 的電子郵件客戶端
navigator.registerProtocolHandler("mailto",
    "http://www.somemailclient.com?cmd=%s", "Some Mail Client");

screen 物件

history 物件

//後退一頁
history.go(-1);
//前進一頁
history.go(1);
//前進兩頁
history.go(2);

//跳轉到最近的 wrox.com 頁面
history.go("wrox.com");
//跳轉到最近的 nczonline.net 頁面
history.go("nczonline.net");

//後退一頁
history.back();
//前進一頁
history.forward();

if (history.length == 0){
//這應該是使用者開啟視窗後的第一個頁面
}