文章目錄
一、BOM基礎
1.1 打開窗口
點擊按鈕，即可打開一個標籤頁並且四指定的目網址
<body>
<input type="button" value="打開窗口" onclick="window.open('https://www.baidu.com')">
</body>
用法二：
打開窗口，並且往裏邊添加內容
<body>
<textarea id="txt1" cols="100" rows="40"></textarea>
<input type="button" value="運行" id="btn1">
</body>
<script>
window.onload=function(){
var txt1 = document.getElementById('txt1');
var btn1 = document.getElementById('btn1');
btn1.onclick=function(){
//_black 打開新窗口
//_self 當前窗口
var Newwin = window.open('about:blank','_balck')
Newwin.document.write(txt1.value);
}
}
</script>
這樣子的話，我們可以把txt1 文本域的東西，直接給他添加到新打開的窗口當中
1.2 關閉窗口
window.close()
點擊該按鈕後，即可關閉當前窗口
<body>
<input type="button" value="close" onclick="window.close();">
</body>
注意：
- IE下會彈出警告框
- Firefox 會直接error
解決辦法：
- 需要使用window.open()打開，才能使用window.close()關閉
1.3 常用屬性
1.3.1 window.navigator.userAgent 瀏覽器信息 客戶端信息
userAgent裏邊包含了很多跟瀏覽器相關的信息。常用來判斷瀏覽器類型
- 如果想來判斷其中內容，可以用navigator.userAgent.match()或navigator.userAgent.indexOf()來判斷
- 前者一般是用來判斷手機客戶端，例如navigator.userAgent.match(/iPhone/i) , navigator.userAgent.match(/Safari/i)
- 後者用來變向判斷userAgent字符串中某值是否存在，例如 navigator.userAgent.indexOf(“iPhone OS 4_0_2”) !=-1
<script>
alert(window.navigator.userAgent);
</script>
1.3.2 window.location url信息
當前頁面的瀏覽器地址，可以使用 location 來設置頁碼
下面這段會彈出當前瀏覽器地址
<script>
alert(window.location);
</script>
這段代碼的作用是，當我們點擊該按鈕後，會跳轉到百度首頁
<body>
<input type="button" value="跳轉" onclick="window.location='https://www.baidu.com'">
</body>
1.4 補充知識
補充一點知識： window.write()
如果是當作事件來用的話，document.write(‘abc’);
會把頁面上所有元素都刪除，只剩下abc
二、尺寸及座標
可視區：不包括 頂部的書籤欄 以及底部的滾動條
2.1 clientWidth; 可視區的寬度
2.2 clientHeight； 可視區的高度
<body>
<input type="button" value="可視區大小" id="btn1">
</body>
<script>
window.onload=function(){
var btn = document.getElementById('btn1');
btn.onclick=function(){
alert('寬:'+document.documentElement.clientWidth);//1536
alert('高:'+document.documentElement.clientHeight);//772
}
}
</script>
2.3 scrollTop 到頁面頂端的距離(可寫)
當頁面往下滾動的時候，scrollTop的值在不斷增大
<body style="height: 2000px;">
</body>
<script>
window.onload=function(){
document.onclick=function(){
alert(document.documentElement.scrollTop);
}
}
</script>
2.4 offsetTop:元素到offsetParent頂部的距離
1、 offsetParent：距離元素最近的一個具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合條件，offsetParent爲body。如下圖所示：獲取child的offsetTop，圖1的offsetParent爲father，圖2的offsetParent爲body。
2、 注意：只有元素show（渲染完成）纔會計算入offsetTop，若是中間有元素數據需要異步獲取，會導致最終獲取的offsetTop值偏小
2.5 offsetLeft 元素與上一級定位元素的距離
offsetLeft值跟offsetTop值的獲取跟父級元素沒關係，而是跟其上一級的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有關係。
2.6 offsetHeight 元素的高度 只讀(不包括margin)
包括padding、border、水平滾動條，但不包括margin的元素的高度。
對於inline的元素這個屬性一直是0，單位px，只讀元素。
三、常用方法和事件
3.1 系統對話框
3.2 window對象常用事件
3.2.1 .onscroll 當頁面滾動的時候觸發事件
3.2.2 .onresize 當窗口改變大小的時候觸發事件
使用JS實現讓元素固定在某個位置。
<body>
<div id="div1"></div>
</body>
<style>
#div1{
width: 200px;
height: 159px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
body{
height: 2000px;
}
</style>
<script>
window.onscroll=function(){
var scrollTop = document.documentElement.scrollTop;
var div = document.getElementById('div1');
div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';
}
</script>
效果：
四、系統對話框
4.1 confirm() 彈出帶有確認，與取消的按鈕
<body>
<p id="demo"></p>
</body>
<script>
window.onload=function(){
var p = document.getElementById('demo');
var r = window.confirm('您確定要刪除嗎？')
if(r==true){
p.innerHTML='您按下了確定按鈕！';
}else{
p.innerHTML='您按下了取消按鈕!';
}
}
</script>
**
**
4.2 prompt() 彈出帶有輸入框的提示框
<body>
<p id="demo"></p>
</body>
<script>
window.onload=function(){
var result = prompt('請輸入您的姓名:','null')
document.getElementById("demo").innerHTML=result;
}
</script>
