BOM operation (b) in the JavaScript

First, access to the browser address bar information

window.location

// get the browser address bar information 
console.log (window.location);

1, page refresh
window.location.reload () method can not write directly, otherwise it will have been refreshed, generally used for events and binding judgment execution, you can not perform alone

// Click the button to refresh the specified page 
btn.onclick = function () {
    window.location.reload();
}

2, to obtain the address bar content window.location.herf () method to get information on the address bar, the contents of the Chinese into normal display,

// get the address bar information 
console.log (window.location.herf);
 // will address Chinese normal display 
console.log (decodeURIComponent (window.location.herf))

3, access to the host address in the address bar window.location.host When the page server is running again, you can get a server host address information, IP address or domain name is generally
4 to obtain numerical information in the address field for the port window.location.port the computer itself communicate
5, to obtain information in the address bar parameter passing data window.location, search
　　　　format is the address? parameter passing data
　　　　acquired is? content and after the
Second, the operation of the navigation bar

1, the settings page jump address
window.location.herf = 'baidu.com';

// Click the tab trigger code program 
    d.onclick = function () {
        window,location,herf = 'http://baidu.com';
    }
    // define countdown 
    var  int =. 5 ;
     // defined timer 
    setTnterval ( function () {
         // outputting content, the countdown time is variable 
        d2.innerHTML = `Please note, $ { int } After seconds, go to page Sina `;
         // countdown time to do - decrement operations 
        int - ;
         // countdown time is reached, performs page jump operation 
        IF ( int == -1 ) {
            window.location.href = 'https://www.sina.com';
        }
    }, 1000);

2, access to browser-related information

// Gets the browser-related information 
console.log (window.navigator);
 // get the browser version, kernel, type, and other relevant information 
console.log (window.navigator.userAgent);
 // now in order to pay tribute Netscape , appName, are unified Netscape 
console.log (window.navigator.appName);
 // browser software version information 
console.log (window.navigator.appVersion);
 // local computer, operating system information 
console.log (window. navigator.platform);

Third, the browser jump

window.history JavaScript program can achieve the function of the browser forward and back buttons, and more generally for the registration page, fill out the information on the electricity supplier shopping platform step, the next step, and similar operations using
console.log (window.history)

// current window altogether visited several pages 
window.history.lenght
 // return to the previous page 
window.history.back
 // forward into the next page 
window.history.forward
 // jump to several pages, on behalf of + forward - backward on behalf of 
window.history.go (digital)

Note:
1, repeat visits, even if the page is repeated, length will increase,
2, length only records the number of times access this window, the new window is not accessed
3, target = "_ blank" is not the length of length
4, if the browser page too and more, to determine how to access the page
to control user access to the page and jump through hyperlinks Nie Rong
example:

/*
During demo
    Page 1, can only go to page 2
    Page 2, page 3 only to
    Page 3, can only go to page 4
    Page 4, can only go to page 5
    Page 5, can only go to page 6
    On page 6 coming to an end
In this case, the content of each jump is fixed content
*/

Four common events, BOM operations

1, a click event clcik
onclcik binding click
tab ID.onclick = function () {
program;
}
Example 1,

d1.onclick = function(){ 
    console.log ( 'I am a div, someone point me' );
}

Example 2,

function fun(){
    console.log ( 'I am a well-defined function program, bind to div click event' )
}
var fun2 = function(){
    console.log(123)
}
// to click events, fun bind a function name, the function address stored 
// trigger event, call address, find the corresponding function, execute the function program 
d2.onclick = fun;
d3.onclick = fun2 ;

Note:
A, need to bind function has been defined
B, absolutely can not have the time to call ()
C, must be bound function name, or variable name

2, the load event:
the window.onload = function () {} program page load event
Note:
A, bind the load event, let the program after the page loaded, then execute, do not recommend this method
B, is script generally label, writing in the program of the bottom
3, open event
window.open ( 'url address) define the page that opens a new window to open the page ---
example 1,

loc.onclick = function(){
    window.location.href = 'https:/www.baidu.com';
}

Example 2,

ope.onclick = function(){
    window.open('https:/www.baidu.com') ;
}

4, scroll event
window.onscroll = function () {} event scrollbar

window.onscroll = function(){
    console.log ( 'I roll' );
}

5、resize事件
window.onresize = function(){}

// when the page size is changed, the trigger event 
window.onresize = function () {
    console.log ( 'I changed' );
}

6, close the event

window.close()

window.close ()
 // Close the current page events 
c.onclick = function () {
    window.close();
}

Note:
A, and common click Scroll
B, there are some on some not on, did not open and close on such