BOM中window對象的其他方法
前兩篇部落格一直在講window對象的方法,現在将剩下的其他方法以此進行講解。
HTML代碼:
<button>open()</button>
<button>close()</button>
<button>focus()</button>
<button>print()</button>
<br>
<button>resizeTo()</button>
<button>resizeBy()</button>
<button>moveTo()</button>
<button>moveBy()</button>
<button>scrollTo()</button>
<button>scrollBy()</button>
CSS代碼:
body{
height: 2000px;
width: 2000px;
}
JS代碼:
// 05window對象其他的方法
var aBtns = document.getElementsByTagName("button");
// open(URL,target,"width=100,height=100") 打開一個新的浏覽器視窗或查找一個已命名的視窗。 預設在新視窗打開
aBtns[0].onclick = function () {
// newWindow = window.open("01簡單認識BOM.html", "_blank", "width=300,height=300");
newWindow = window.open("", "_blank", "width=300,height=300");
newWindow.focus();
}
// close() 關閉浏覽器視窗。 隻能關閉通過open()方法打開的網頁
aBtns[1].onclick = function () {
newWindow.close();
}
// stop() 停止頁面載入。 圖檔
// blur() 把鍵盤焦點從頂層視窗移開。
// focus() 把鍵盤焦點給予一個視窗。
aBtns[2].onclick = function () {
newWindow.focus();
}
// print() 列印目前視窗的内容。
aBtns[3].onclick = function () {
window.print();
}
// 針對open()方法打開視窗 不可以含有一個以上的Tab
// resizeTo(width,height) 把視窗的大小調整到指定的寬度和高度。
aBtns[4].onclick = function () {
newWindow.resizeTo(500, 500);
}
// resizeBy() 按照指定的像素調整視窗的大小。
aBtns[5].onclick = function () {
newWindow.resizeBy(-100,-100);
}
// moveTo() 把視窗的左上角移動到一個指定的坐标。
aBtns[6].onclick = function () {
newWindow.moveTo(100,100);
}
// moveBy() 可相對視窗的目前坐标把它移動指定的像素。
aBtns[7].onclick = function () {
newWindow.moveBy(100,100);
}
// 滾動條
// scrollTo() 把内容滾動到指定的坐标。
aBtns[8].onclick = function () {
window.scrollTo(100,100);
}
// scrollBy() 按照指定的像素值來滾動内容。
aBtns[9].onclick = function () {
window.scrollBy(100,100);
}
// createPopup() 建立一個 pop-up 視窗。
// getSelection() 傳回一個 Selection 對象,表示使用者選擇的文本範圍或光标的目前位置。
// getComputedStyle() 擷取指定元素的 CSS 樣式。
// matchMedia() 該方法用來檢查 media query 語句,它傳回一個 MediaQueryList對象。
// atob() 解碼一個 base-64 編碼的字元串。
// btoa() 建立一個 base-64 編碼的字元串。
視訊講解連結:
https://www.bilibili.com/video/BV1Ep4y1D77E/