BOM（12）

時間 2019-11-17

標籤 bom 简体版

原文原文鏈接

1、BOM是什麼？

BOM（Browser Object Model）即瀏覽器對象模型。

BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象；

因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象是window；

BOM由一系列相關的對象構成，而且每一個對象都提供了不少方法與屬性；

BOM缺少標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape瀏覽器標準的一部分。

2、學習BOM學什麼？

咱們將學到與瀏覽器窗口交互的一些對象；例如能夠移動、調整瀏覽器大小的window對象；能夠用於導航的location對象與history對象；能夠獲取瀏覽器、操做系統與用戶屏幕信息的navigator與screen對象；能夠使用document做爲訪問HTML文檔的入口，管理框架的frames對象等。瀏覽器

BOM結構圖bash

3、1.Window對象

window對象是js中的頂級對象，全部定義在全局做用域中的變量、函數都會變成window對象的屬性和方法，在調用的時候能夠省略window。（它表明一個瀏覽器窗口或一個框架，會在每次出現時被自動建立。）框架

（1）window對象屬性 屬性表示狀態，方法表示動做函數

window :窗戶自身, window=window.self ；性能

document（文檔對象） :表示給定瀏覽器窗口的HTML文檔；學習

history（歷史對象） :包含有關客戶訪問過的URL信息；ui

window.location //URL地址,配備佈置這個屬性能夠打開新的頁面；
spa

location（位置對象） :包含有關當前URL的信息；操作系統

screen （顯示器對象）:包含有關客戶端的屏幕和顯示性能的信息；（案例：製做屏幕保護）3d

status : 設置或檢索窗口底部的狀態欄中的消息；

name :設置或檢索窗口或框架的名稱；

parent:返回父窗口；

top :返回最頂層的先輩窗口；

navigator（導航器對象） :對Navigator對象的只讀引用；

defaultStatus :設置或返回窗口狀態欄中的默認文本；

innerheight :返回窗口的文檔顯示區的高度；

innerwidth :返回窗口的文檔顯示區的寬度；

outerheight :返回窗口的外部高度；

outerwidth :返回窗口的外部寬度；

pageXoffset :設置或返回當前頁面相對於窗口顯示區左上角的X位置；

pageYOffset :設置或返回當前頁面相對於窗口顯示區左上角的Y位置；

（2）window的對象方法

window.close(); /關閉窗口

open()打開一個新的瀏覽器窗口或查找-個已命名的窗口。

<button>百度</button>
<button>關閉窗口</button>
<button>刷新</button>
<script>
	var bt1=document.getElementsByTagName('button')[0];
	bt1.onclick=function(){
		//location.href="http://www.baidu.com";//地址欄發生變化，在當前頁面
		window.open("http://www.baidu.com")//打開一個新的網頁
	}
	var bt2=document.getElementsByTagName('button')[1];
	bt2.onclick=function(){
		window.close();//關閉當前窗口；只有一個頁面時，瀏覽器也會自動關閉
	}
	var bt3=document.getElementsByTagName('button')[2];
	bt3.onclick=function(){
		location.reload();//刷新
	}
</script>複製代碼

window.history.go(-1); //訪問瀏覽器窗口的歷史,負數爲後退,正數爲前進

window.history. back();//同上

window.history.forward(); //同上

<button>返回</button>
<button>前進</button>
<script>
	var bt1=document.getElementsByTagName('button')
	bt1.onclick=function(){
		//history.back();//返回上一個網頁
		history.go(-1);
	}
	bt2.onclick=function(){
		//history.forward();//前進到上一個網頁
		history.go(1);
	}
</script>
複製代碼

window.setTimeout("alert(' xX)", 1000); /設置在指定的毫秒數後執行指定的代碼，接受2個參數,要執行的代碼和等待的毫秒數

window clearTimeout("ID"); /取消還未執行的暫停,將暫停ID傳遞給它

window.setlnteral(function, 1000); 無限次地每隔指定的時間段重複一次指定的代碼,參數同setTimeout()- -樣

setlnterval()按照指定的週期(以毫秒計)來調用函數或計算表達式。

setTimeout(方法秒數)在指定的毫秒數後調用函數或計算表達式。

clearlnterval()取消由setinterval() 設置的timeout。

clearTimeout()取消由setTimeout()方法設置的timeout。

screen :包含有關客戶端的屏幕和顯示性能的信息；

screen.width 屏幕的寬度屬性 screen.height 屏幕的高度屬性

<style>
	*{
		padding: 0;
		margin: 0;
	}
	.box{		
		background-color: orange;
		margin-top: 50px;
		position: absolute;
	}
</style>
<body>
<div class="box" style="top: 0;left: 0;width: 200px;height: 150px;"></div>
<!-- 圖片有天生的width屬性，div沒有， -->
<script>
	//console.log(screen.width);//屏幕的寬度屬性
	//console.log(screen.height);//屏幕的高度屬性
	var box=document.getElementsByClassName('box')[0];
	var x=parseInt(box.style.left);
	var Width=parseInt(screen.width)-parseInt(box.style.width);
	var y=parseInt(box.style.top);
	var Height=parseInt(screen.height)-parseInt(box.style.height)
	window.onload=function(){
		var index=true;//定義一個新的變量index，控制方向，true向右，fasle向左
		var index1=true;
		function move(){
			if (index) {//向右
				x++
				box.style.left=x+"px";
				if (x>Width) {
					index=false;
				}
			}else{//向左
				x--
				box.style.left=x+"px";
				if (x<=0) {
					index=true;
				}
			}
			if (index1) {//向下
				y++
				box.style.top=y+"px";
				if (y>Height) {
					index1=false;
				}
			}else{//向上
				y--
				box.style.top=y+"px";
				if (y<=0) {
					index1=true;
				}
			}
		}
		var t=setInterval(move,1);
	}
</script>
複製代碼

關鍵思想：引入第三方變量index控制方向，true向右，false向左

瀏覽器刷新頁面的幾種方法：

history.go(0) ;
location.reload(); 
location=location ;
location.assign(location) ;
document.execCommand('Refresh'); 
window.navigate(location) ;
location.replace(location) ;
document.URL=location.href;複製代碼

相關標籤/搜索

每日一句

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