天天看點

BOM中window對象的其他方法

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/

繼續閱讀