Detailed introduction to Js operating BOM object model

We know that BOM can access and operate the browser window. We generally use BOM as a mobile window, change the text of the status bar or perform other actions not directly related to the page content.

window object:

1. Window operation

Among them, moveTo and moveBy are the movement of the window, resizeTo and resizeBo are to set the size of the window, scrollTo ,scrollBy is to set the position of the scroll bar each time it scrolls.

Opening and closing new windows:

openBtn.onclick = function() {
    newWindow = window.open("./test.html", "_blank", "width=300px, height=300px, left=500px, top=300px, toolbar=no")
};
closeBtn.onclick = function() {
    newWindow.window.close();
};

Time interval and pause:

Time interval:

setInterval

Pause:

window.clearInterval

Example:

start.onclick = function() {
    // 3. 设置定时器
    times = setInterval(function() {
       window.scrollBy(0, 5);
    }, 40);
};
stop.onclick = function() {
    //4. 清除定时器
    window.clearInterval(times);
};

setTimeOut: Execute an operation only once after the time interval

Attached below is an example of a countdown:

History record:

history.go()

The parameters in brackets can be 1,-1

history.go(1)表示前进一页.相当于history.forward()
history.go(-1)表示后退一页,相当于history.back()
location:

location object represents the URL of the loading window. In addition, it can also parse the URL

1.hash: Returns the part after # in the URL

2.host: Return the name of the server

3.href: The complete URL of the currently loaded page

4.search: The part after the question mark in the URL of the GET request

location object There is a reload method: you can reload the current page (refresh).

reload is false, load from the cache, reload is true, load from the server, omit parameters, the default is false

screen object:

window.screen.availWidth+" "+window.screen.availheight (the width and height of the screen that the window can work with)

window. screen.Width+" "+window.screen.height (width and height of the screen)

The availHeight and availWidth properties are very useful when determining the size of a new window

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the transform attribute in CSS3

How to use CSS3 attribute selectors to replace the role of JS

How to use css3 to make a progress bar

The above is the detailed content of Detailed introduction to Js operating BOM object model. For more information, please follow other related articles on the PHP Chinese website!