Common operations of BOM and compatible writing methods for obtaining page / window height, width and scrolling

brief introduction ：

BOM yes Browse Object Model, Browser object model for short .

Document object model of browser , There is no unified standard , Don't like DOM（ Document object model ） Yes, there is W3C The provision made by the alliance is right HTML Interface for document operation ;BOM Although it is not a standard interface , But the functions of this interface provided by browser manufacturers are roughly the same .

window The object is BOM The top floor of ( The core ) object , All objects extend through it .

window Under the Several function objects (window Properties of ) Yes :navigatior,screen,document,history,location

1、navigator object

Its properties ：

appCodeName Return the code name of the browser ;

appName Return to the name of the browser ;

appVersion Return the platform and version information of the browser ;

cookieEnabled Return to indicate if... Is enabled in the browser cookie Boolean value ;

platform Return to the operating system platform where the browser is running ;

userAgent Returns... Sent by the client to the server user-agent The value of the head .

2、screen object

Its properties ：

availHeight Back to the height of the screen （ barring Windows The task bar ）;

availWidth Back to the width of the screen （ barring Windows The task bar ）;

height Returns the total height of the screen ;

width Returns the total width of the screen ;

pixelDepth Return to the color resolution of the screen （ The number of bits per pixel ）.

3、document object

We have studied it alone before document object , I won't go into that .

4、history object

Its properties ：

length Return the number of URLs in the access history list ;

back() load history The previous one in the list URL;

forward() load history Next... In the list URL;

go(number|url) load history A specific page in the list // Negative numbers go back , Forward in positive numbers

5、location object

Its properties ：

hash Return to one URL Anchor part of //192.168.1.102:8081?name=jack&pwd=123#page1;

host Return to one URL The host name and port of ;

hostname return URL The host name ;

href Return to the complete URL ;

pathname Back to URL Pathname ;

port Return to one URL The port number used by the server ;

protocol  Return to one URL agreement ;

search Return to one URL The query part of .

Method :

assign(url) Load a new document ;

reload() Reload the current document ;

replace(url) Replace the current document with a new document .

window Other properties of ：

closed Whether the return window has been closed .

innerHeight Returns the height of the document display area of the window

innerWidth Returns the width of the document display area of the window

outerHeight Returns the external height of the window , Contains toolbar and scroll bar

outerWidth Returns the external width of the window , Contains toolbar and scroll bar

screenLeft Returns the relative to the screen window x coordinate

screenTop Returns the relative to the screen window y coordinate

screenX Returns the relative to the screen window x coordinate

screenY Returns the relative to the screen window y coordinate

onload Specify when all configurations are loaded ( Picture exception ) Called function .

pageXOffset Return to the top left corner of the current page relative to the window display area X Location (body Horizontal rolling distance )

pageYOffset Return to the top left corner of the current page relative to the window display area Y Location (body Vertical rolling distance )

window Methods ：

alert() Display a warning box with a message and a confirm button .

close() Close the browser window .

confirm() Displays a dialog box with a message and a confirm and Cancel buttons .

open(url, Open mode , New window configuration ,BOOL) Open a new browser window //4 All parameters are optional ( Usually fill in the first parameter ) //url: New window address Open mode :blank( Default ),parent,self,top To configure ( Various ): General default BOOL: The new window is in the history , Do you want to replace print() Print the contents of the current window .

prompt(tishi,value) Displays a dialog box that prompts for user input .

scrollBy() Scrolls content according to the specified pixel value ( The premise is that you have a scroll bar : Enough content )

scrollTo() Scroll content to specified coordinates .( The premise is that you have a scroll bar : Enough content )

setInterval(callback,times) According to the specified period （ In milliseconds ） To call a function

setTimeout(callback,times) Call the function after the specified millisecond count.

clearInterval() Cancel from setInterval() Set up timeout.

clearTimeout() Cancel from setTimeout() Method set timeout.

5.navigator

Let the window scroll to the specified position

1. Roll to the specified coordinates , The premise is that the page is long enough , Be able to scroll

window.scrollTo(x,y);

window.scroll(x,y);

scrollBy(x,y);

The functions of the first two methods are similar , The usage is to x,y Coordinates the incoming , Scroll to the specified position . and scrollBy() It will accumulate on the basis of previous data .

2.el.scrollIntoView()

Scroll to the specified element visible , The bottom of the calling element will try to be flush with the top of the viewport , Not necessarily. The main thing is whether you can roll How far can you roll el.scrollIntoView(true) The default is true, Align the element with the top edge of the viewport ; If you pass parameters false, Align the lower edge of the element with the lower edge of the viewport ;

Some methods have compatibility problems , Adopt compatibility writing method to solve .

Page scrolling distance

window.pageXOffset/window.pageYOffset （x Axis and y Axis ）,IE8 And IE8 The following are not compatible

Compatible with ：

document.body.scrollLeft/scrollTop

document.documentElement.scrollLeft/scrollTop

combined , Compatible writing ：

sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

sX=window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft

The size of the visible area of the window

window.innerWidth/window.innerHeight// bom operation ,IE8 And IE8 The following are not compatible ;

document.documentElement.clientWidth/clientHeight// In standard mode (<!DOCTYPE html>, Rendering mode ), Any browser is compatible ;

document.body.clientWidth/clientHeight// Suitable for weird / Browser in hybrid mode ;

document.compatMode// Distinguish between standard mode and not .(BackCompat： Standard compatibility mode off .CSS1Compat： Standard compatibility mode on )

Compatible writing ：

  let cWidth,cHeight;
	if (document.compatMode == "BackCompat") {
		cWidth = window.innerWidth||document.body.clientWidth;
		cHeight =window.innerHeight||document.body.clientHeight;
	} else {
		//document.compatMode == "CSS1Compat"
		cWidth = window.innerWidth||document.documentElement.clientWidth;
		cHeight = window.innerHeight||document.documentElement.clientHeight;
	}

Geometric dimensions of elements

el.getBoundingClientRect();
This method returns an object , There are... In the object left,top,right,bottom,height,width attribute .

left and top Represents the top left corner of the element X and Y coordinate ,right and bottom Represents the lower right corner of the element X and Y coordinate , There are properties in the returned object x,y, Indicates that the left vertex of the element is relative to the page body Distance of left vertex .