JS BOM browser object model

BOM output

Open close web page

open('https://www.baidu.com');//Open Baidu webpage, winodow object can be omitted
//window in js between lines cannot be omitted
<button onclick="window.open('https://Www.baidu. COM / '"> Baidu < / button >

//Open a blank page
open('about:blank',"_self")

//Close current page
close();
//window in inter line js cannot be omitted
<button onclick="window.close()">Close</button>

Jump + get user information

//Return user device information of browser
console.log(window.navigator.userAgent)

//A frequently used method, jump to the web page
window.location.href = 'https://www.baidu.com';

Window client

It can directly obtain the window information of length, width and height through labels

var oBox = document.getElementsByClassName('box')[0];

oBox.clientTop //Distance from content area to top of border
oBox.clientLeft  //Distance from content area to left of border
oBox.clientWidth  //Content area + left and right padding visual width
oBox.clientHeight  //Content area + upper and lower padding visual height

Visual area of the screen

//onload can be executed after loading the page
window.onload = function(){
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);

    window.onresize = function(){

        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
    }
}

scroll

onscroll rolling monitor, rolling width and height

window.onload = function(){ 
    //Implement listening to rolling events
    window.onscroll = function(){
        console.log(1111)
        console.log('upper'+document.documentElement.scrollTop)
        console.log('Left'+document.documentElement.scrollLeft)
        console.log('wide'+document.documentElement.scrollWidth)
        console.log('high'+document.documentElement.scrollHeight)

    }
}