BOM
BOM的概念
BOM(Browser Object Model) 是指瀏覽器對象模型,瀏覽器對象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。BOM由多個(gè)對象組成,其中代表瀏覽器窗口的Window對象是BOM的頂層對象,其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進(jìn)行編程處理,
比如:刷新瀏覽器、后退、前進(jìn)、在瀏覽器中輸入U(xiǎn)RL等
BOM的頂級對象window
window是瀏覽器的頂級對象,當(dāng)調(diào)用window下的屬性和方法時(shí),可以省略window
注意:window下一個(gè)特殊的屬性 window.name
function f1() {
console.log("我堂堂 window 也是醉了");
}
window.f1();
因?yàn)轫撁嬷械乃袃?nèi)容都是window的,所以window在寫的時(shí)候是可以省略的.
- 我自己的理解:
瀏覽器中有個(gè)頂級對象:window----皇帝
- 頁面中頂級對象:document-----皇宮大總管
- 頁面中所有的內(nèi)容都是屬于瀏覽器的,頁面中的內(nèi)容也都是window的
- 變量是window的
對話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
window.alert("先生您好");//以后不用,測試的時(shí)候使用
window.prompt("請輸入您的小賬號");
var result=window.confirm("您確定退出嗎啊 是吧!?");
console.log(result);
</script>
</head>
<body>
<p>我是一個(gè)p標(biāo)簽</p>
</body>
</html>
頁面加載事件
當(dāng)頁面完全加載所有內(nèi)容(包括圖像、腳本文件、CSS 文件等)執(zhí)行
只要頁面加載完畢,這個(gè)事件就會觸發(fā)-----頁面中所有的內(nèi)容,標(biāo)簽,屬性,文本,包括外部引入js文件
頁面加載的時(shí)候,按鈕還沒出現(xiàn),頁面還沒有加載完畢
頁面加載完畢了,再獲取按鈕
onload=function () {
document.getElementById("btn").onclick=function () {
alert("您好,頁面加載完了,有我了");
};
};
擴(kuò)展的事件---頁面關(guān)閉后才觸發(fā)的事件
window.onunload=function () {
alert("我是關(guān)閉之后才觸發(fā)的 有我你也看不到");
};
擴(kuò)展事件---頁面關(guān)閉之前觸發(fā)的
window.onbeforeunload=function () {
alert("我是關(guān)閉之前才觸發(fā)的");
};
定時(shí)器
https://blog.csdn.net/weixin_45525272/article/details/108143608
location對象
https://blog.csdn.net/weixin_45525272/article/details/108104533
history對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="回退" id="btn1"/>
<input type="button" value="前進(jìn)" id="btn2"/>
<script src="common.js"></script>
<script>
//回退
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前進(jìn)
my$("btn2").onclick = function () {
window.history.forward();
};
</script>
</body>
</html>
navigator對象
通過userAgent可以判斷用戶瀏覽器的類型
通過platform可以判斷瀏覽器所在的系統(tǒng)平臺類型.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
// 通過userAgent可以判斷用戶瀏覽器的類型
console.log(window.navigator.userAgent);
//通過platform可以判斷瀏覽器所在的系統(tǒng)平臺類型.
console.log(window.navigator.platform);
</script>
</head>
<body>
</body>
</html>