Common BOM operations

BOM(Browser Object Model) browser object model, js operation browser API provided by browser, BOM provides web-independent browser function object, it has no formal standard, because modern browsers have (almost) implemented the same methods and properties of JavaScript interactivity, so it is often considered as BOM methods and properties.

Windows is the top-level object of BOM. It represents the window of browser. Windows objects have two identities in browser: 1. global s in ECMAScript; 2. javascript interface of browser window

1.window Object
Position of 1.1 window
The screenX and screenY properties return the X and Y coordinates of the window relative to the screen. (Not supported by ie browser

console.log(screenX,screenY)

1.2 Browser window size
outWidth indicates the width of the browser window;
outHeight represents the height of the browser window

console.log(outerWidth,outerHeight);

1.3 Browser View Area Size
innerWidth represents the width of the browser's view area;
innerHeight indicates the height at which you browse to the view area;

console.log(innerWidth,innerHeight);

2.screen object
2.1 Total width and height of screen

 console.log(screen.width,screen.height);

2.2 Width and Height of Screen Availability

console.log(screen.availWidth,screen.availHeight);

3.window.open() Method can be used to navigate to a specified URL or to open a new browser window. This method takes four parameters: the URL to be loaded, the target window, the attribute string, and the Boolean value indicating whether the new window replaces the currently loaded page in the browser's history. Typically, this method is called with only three parameters before the last parameter unlocks the new window.Only when you speak.

window.open(URL,name,specs,replace)

4. Pop-up windows (system dialogs)
4.1 enables browsers to invoke system dialogs to display messages to users. These dialogs are independent of the pages displayed in the browser and do not contain HTML. Their appearance is determined by the operating system or the browser, and CSS settings cannot be used. In addition, these dialogs are synchronous modal dialogs in which code stops executing and disappears when they are displayed.Code will not resume execution until it is lost.
4.2lert() is a warning box and can only pass one parameter

alert('Do not use by minors')

4.3confirm() confirmation box return value is Boolean type, click OK to return true, click Cancel to return flase

var res = confirm('Are you sure?');
        if(res){
             console.log(res);
        }else{
            console.log(res);
        }

4.4prompt() prompt box, receives two parameters, the text to be displayed to the user and the default value of the input box, click OK to return the input text, cancel or close to return null

 var res = prompt('Enter Name','xxx');
        if(res){
            console.log(res);
        }else{
            console.log(res);
        }

5.lacation objects
5.1 Attributes
host returns server name and port number
hostname returns server name without port number
href returns the full URL of the currently loaded page
pathname returns the directory and file name of the URL
Port returns the port number specified in the URL
Protocol used by protocol return page
search returns the query string for the URL. This string begins with a question mark
5.2 Method
5.2.1

    <button onclick="btnOpen()">Jump Page</button>
    <button onclick="btnOpen1()">Replace Page</button>
    <button onclick="btnOpen2()">Refresh</button>
    <script>
        function btnOpen(){
            // assign() receives a specified URL, jumps to the specified page, and generates a record in the browser history
            location.assign('https://www.baidu.com');
        }
        function btnOpen1(){
            // replace() receives a specified URL, replaces the current page, and no longer generates records from browser history
            location.replace('https://www.baidu.com');
        }
        // reload() refreshes the current page. The default parameter is false to override the load in the most efficient way, possibly directly from the cache, and true to force the load from the server
        function btnOpen2(){
            location.reload();
        }
    </script>

6.history Object
6.1 This object keeps a history of users going online. For security reasons, developers cannot know the URLs that users have visited, but a list of pages that users have visited can also go backwards without knowing the actual URLs. Note: There is no public standard applied to History objects, but all browsers support this object.
6.2 Properties
length returns the number of addresses in the history list
6.3 Method
6.3.1back() Loads the previous URL in the history list
6.3.2forward() loads the next URL in the history list
6.3.3go() loads a specific page in the history list, with a negative number indicating a backward jump and a positive number indicating a forward jump.
6.3.4 timeout call

 // Timeout call
        var id = setTimeout(() => {
            console.log('hello word');
        },1000);
        // Clear timeout call
        // clearTimeout(id);

6.3.5 Intermittent Calls

 var num = setInterval(()=> {
            console.log('hello word');
        },1000)
        setTimeout(() => {
        //Cancel Intermittent Call
            clearInterval(num);
        },5000)

Tags: Javascript BOM

Posted on Wed, 08 Sep 2021 14:31:41 -0400 by Wolf_22