JavaScript基礎10

nana478發表於2020-11-25
JavaScript

JavaScript_10

JavaScript中的BOM物件

    瀏覽器物件模型--Browser ObjectModel (BOM)

    1.Window 物件

       1.1  屬性

          有三種方法能夠確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

          對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

          window.innerHeight - 瀏覽器視窗的內部高度

          window.innerWidth - 瀏覽器視窗的內部寬度

          對於 Internet Explorer 8、7、6、5：

          document.documentElement.clientHeight

          document.documentElement.clientWidth

          或者

          document.body.clientHeight

          document.body.clientWidth

          實用的 JavaScript 方案（涵蓋所有瀏覽器）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				//確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）
				var w=window.innerWidth || 
					  document.documentElement.clientWidth || 
					  document.body.clientWidth;
				var h=window.innerHeight || 
				      document.documentElement.clientHeight ||
					  document.body.clientHeight;
				window.alert(w+"*"+h);	  
			}
		</script>
	</head>
	<body>
	</body>
</html>

       1.2 方法

        1. open() 方法

          用於開啟一個新的瀏覽器視窗或查詢一個已命名的視窗

          格式:window.open(URL,name,features,replace)

URL

一個可選的字串，宣告瞭要在新視窗中顯示的文件的 URL。如果省略了這個引數，或者它的值是空字串，那麼新視窗就不會顯示任何文件。

name

一個可選的字串，該字串是一個由逗號分隔的特徵列表，其中包括數字、字母和下劃線，該字元宣告瞭新視窗的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該引數指定了一個已經存在的視窗，那麼 open() 方法就不再建立一個新視窗，而只是返回對指定視窗的引用。在這種情況下，features 將被忽略。

features

一個可選的字串，宣告瞭新視窗要顯示的標準瀏覽器的特徵。如果省略該引數，新視窗將具有所有標準特徵。

replace

一個可選的布林值。規定了裝載到視窗的 URL 是在視窗的瀏覽歷史中建立一個新條目，還是替換瀏覽歷史中的當前條目。支援下面的值：

true - URL 替換瀏覽歷史中的當前條目。

false - URL 在瀏覽歷史中建立新的條目。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_win(){
				window.open("https://www.baidu.com/");
			}
			function open_aboutblank(){
				window.open("about:blank","空白頁","width=200,height=100",false);
			}
		</script>
	</head>
	<body>
		<input type=button value="Open百度" onclick="open_win()" /><br>
		<input type=button value="about:blank" onclick="open_aboutblank()" />
	</body>
</html>

          重要事項：請不要混淆方法 Window.open() 與方法 Document.open()，這兩者的功能完全不同。為了使您的程式碼清楚明白，請使用 Window.open()，而不要使用 open()。

        2. close() 方法用於關閉瀏覽器視窗。

          說明:方法 close() 將關閉有 window 指定的頂層瀏覽器視窗。某個視窗可以通過呼叫 self.close() 或只呼叫 close() 來關閉其自身。

          只有通過 JavaScript 程式碼開啟的視窗才能夠由 JavaScript 程式碼關閉。這阻止了惡意的指令碼終止使用者的瀏覽器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var myWindow=null;
			
			window.onload=function(){
				myWindow=window.open("about:blank","","width=200,height=100");
				myWindow.document.write("This is 'myWindow'");
			}
			
			function closeWin(){
				myWindow.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="Close 'myWindow'"
		onclick="closeWin()" />
	</body>
</html>

        3. JavaScript 彈窗方法

          在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。

          警告框:window.alert("sometext");

          確認框:window.confirm("sometext");

          當確認卡彈出時，使用者可以點選 "確認" 或者 "取消" 來確定使用者操作。

          當你點選 "確認", 確認框返回 true， 如果點選 "取消", 確認框返回 false。

          提示框:window.prompt("sometext","defaultvalue");

          當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。

          如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。

          引數1---提示資訊

          引數2---提示框的預設值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
		<script>
			window.onload=function(){
				var butObj=document.getElementById("but1");
				butObj.onclick=function(){
					//window.alert("測試警告框");
					var val=window.confirm("確定要刪除嗎?");
					if(val){
						var divObj=document.getElementById("div1");
						var hObj=document.getElementById("h");
						divObj.removeChild(hObj);
					}
				}
				
				var butObj2=document.getElementById("but2");
				butObj2.onclick=function(){
					var val=window.prompt("請輸入姓名","");
					if(val.length>0){
						alert(val);
					}else{
						alert("不能為空!");
					}
				}
				
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h1 id="h">測試確認框</h1>
		</div>
		<input id="but1" type="button" value="刪除H1" /><br>
		<input id="but2" type="button" value="測試提示框" />
	</body>
</html>

      1.3 子物件

        1. Window Screen--螢幕

          window.screen 物件包含有關使用者螢幕的資訊。

          1.總寬度和總高度  --- screen.width   /  screen.height

          2.可用寬度和可用高度----screen.availWidth  / screen.availHeight

          3.色彩深度----screen.colorDepth

          4.色彩解析度----screen.pixelDepth

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.總寬度和總高度  --- screen.width   /  screen.height
			window.document.write("<h1>總寬度和總高度:"+window.screen.width+
			"*"+window.screen.height+"</h1>");
			//2.可用寬度和可用高度----screen.availWidth  / screen.availHeight
			window.document.write("<h1>可用寬度和可用高度:"+window.screen.availWidth+
			"*"+window.screen.availHeight+"</h1>");
			//3.色彩深度----screen.colorDepth
			window.document.write("<h1>色彩深度:"+window.screen.colorDepth+"</h1>");
			//3.色彩解析度----screen.pixelDepth
			window.document.write("<h1>色彩解析度:"+window.screen.colorDepth+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

        2. Window Location---頁面的地址 (URL)

          物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

          location.href 屬性返回當前頁面的 URL。

          location.pathname 屬性返回 URL 的路徑名。

          location.assign() 方法載入新的文件。

          location.search 屬性是一個可讀可寫的字串，可設定或返回當前 URL 的查詢部分（問號 ? 之後的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			document.write("<h1>href:"+window.location.href+"</h1>");
			document.write("<h1>pathname :"+window.location.pathname +"</h1>");
			document.write("<h1>search :"+window.location.search+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

例項：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用者登入</title>
		<script>
			window.onload=function(){
				var but1=document.getElementById("but1");
				var username=document.getElementById("text1");
				var password=document.getElementById("pass1");
				var span=document.getElementById("span");
				but1.onclick=function(){
					var usernamevalue=username.value;
					var passwordvalue=password.value;
					if(usernamevalue=="zhangsan" && passwordvalue=="123456"){
						//跳轉到成功的頁面，傳遞使用者名稱
						window.location.href="success.html?username="+usernamevalue;
					}else{
						//給出錯誤提示
						span.innerHTML="<font color='red'>使用者名稱密碼錯誤!</font>";
					}
				}
				//為使用者名稱輸入框新增聚焦事件
				username.onfocus=function(){
					span.innerHTML="";
					username.value="";
					password.value="";
				}
			}
		</script>
	</head>
	<body>
		<center>
		<table border="1px">
			<tr align="center">
				<td colspan="2">
					<h1>使用者登入</h1>
					<span id="span"></span>
				</td>
			</tr>
			<tr align="center">
				<td>使用者名稱:</td>
				<td><input id="text1" type="text" name="username"></td>
			</tr>
			<tr align="center">
				<td>密碼:</td>
				<td><input id="pass1" type="password" name="password"></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input id="but1" type="button" value="使用者登入" /></td>
			</tr>
		</table>
		</center>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var searchvalue=window.location.search;
				if(searchvalue.length<=0){
					window.location.href="login.html";
				}else{
				    //searchvalue===?username=zhangsan
					//var strarray=searchvalue.split("=");
					//var username=strarray[1];
					var username=searchvalue.split("=")[1];
					var h1obj=document.getElementById("h1");
					h1obj.innerHTML="歡迎，"+username+"登入成功!";
				}
			}
		</script>
	</head>
	<body>
		<center>
			<h1 id="h1">歡迎，登入成功!</h1>
		</center>
	</body>
</html>

        3. Window History---歷史物件

        4. Window Navigator--瀏覽器的資訊

 

 

 

 

 

 

 

相關文章