Note source: Still silicon Valley latest version of the full set of JavaScript basic tutorial complete version (140 sets of actual combat teaching,JS from entry to master)_ bilibili _bilibili

[TOC]

BOM

1, the BOM

BOM: Browser object model

BOM allows us to manipulate the browser through JS

The BOM gives us a set of objects that we can use to perform operations on the browser

Window

The window represents the entire browser window, and the window is also a global object in the web page

Navigator

Represents information about the current browser, through which different browsers can be identified

Location

Represents the address bar information of the current browser. You can obtain the address bar information through Location or jump to the page by operating the browser

History

Represents browser history. You can use this object to manipulate browser history for privacy reasons

This object cannot obtain specific historical records. It can only be used to flip the browser to and from the page, and this operation is valid only for the first time

Screen

Represents the user’s screen information, through this object can obtain the user’s display related information

These BOM objects are stored as properties of the Window object in the browser and can be used either directly or through the Window object

console.log(window); // [object Window]
console.log(navigator); // [object Navigator]
console.log(location); // [object Object]
console.log(history); // [object History]
console.log(screen); // [object Screen]
Copy the code

2, the Navigator

For historical reasons, most of the properties in the Navigator object no longer help us identify the browser

console.log(navigator.appName); / / Chrome/Firefox/Edge/IE11: Netscape; Internet Explorer 10 or following: Microsoft Internet Explorer
Copy the code

So how do we tell which browser is which?

Generally we only use userAgent to determine the browser information. UserAgent is a string

This string contains content that describes the browser information. Different browsers have different UserAgents

console.log(navigator.userAgent);
// Chrome： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36
// Firefox: Mozilla/5.0 (Windows NT 10.0; Win64; x64; The rv: 90.0) Gecko / 20100101 Firefox 90.0
// Edge: Mozilla/5.0 (Windows NT 10.0; Win64; X64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/ 537.36EDG /92.0.902.67
// IE11: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident / 7.0; . NET4.0 C; . NET4.0 E; The.net CLR 2.0.50727; The.net CLR 3.0.30729; The.net CLR 3.5.30729; The rv: 11.0) like Gecko
// IE10: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident / 7.0; . NET4.0 C; . NET4.0 E; The.net CLR 2.0.50727; The.net CLR 3.0.30729; The.net CLR 3.5.30729)
// IE9: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident / 7.0; . NET4.0 C; . NET4.0 E; The.net CLR 2.0.50727; The.net CLR 3.0.30729; The.net CLR 3.5.30729)
// IE8: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident / 7.0; . NET4.0 C; . NET4.0 E; The.net CLR 2.0.50727; The.net CLR 3.0.30729; The.net CLR 3.5.30729)
// IE7/IE5: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident / 7.0; . NET4.0 C; . NET4.0 E; The.net CLR 2.0.50727; The.net CLR 3.0.30729; The.net CLR 3.5.30729)
Copy the code

We can determine which browser to use based on the unique identifier in userAgent

var ua = navigator.userAgent;
if (/edg/i.test(ua)) {
    alert("Edge Browser");
} else if (/firefox/i.test(ua)) {
    alert("Firefox");
} else if (/chrome/i.test(ua)) {
    alert(Google Chrome);
} else if (/msie/i.test(ua)) {
    alert("Internet Explorer");
}
Copy the code

The Microsoft and IE flags have been removed in IE11, so userAgent can no longer tell if a browser is IE

So how do we know if Unification is IE?

And again, we’re looking for special, because we know from what we’ve seen before that currentStyle and attchEvent are specific to IE

In addition, there is also an ActiveXObject which is unique to IE. We can make a judgment according to this

// Use 'ActiveXObject' which is a special property in IE, and pass 'window'. Attribute == undefined to determine if it is IE
if(window.ActiveXObject){
    alert("Internet Explorer");
} else{
    alert("Not Internet Explorer");
}
Copy the code

We tested it directly in IE

ActiveXObject is also unique to IE. Why not?

We print in IE11 to see if Window. ActiveXObject equals true

// Use '!! 'converts any value to bool
console.log(!!window.ActiveXObject); // false
Copy the code

What? This?

Don’t worry, let’s take a different approach and use in to determine if the window contains a property

console.log("ActiveXObject" in window); // true
Copy the code

Let’s improve the logic of IE11

var ua = navigator.userAgent;
if (/edg/i.test(ua)) {
    alert("Edge Browser");
} else if (/firefox/i.test(ua)) {
    alert("Firefox");
} else if (/chrome/i.test(ua)) {
    alert(Google Chrome);
} else if (/msie/i.test(ua)) {
    alert("Internet Explorer");
} else if ("ActiveXObject" in window) {
    alert("Internet Explorer 11");
}
Copy the code

3, the Location

length

Length property to get the number of links accessed at this time

alert(history.length);
// Go to the History page: 1
// Access the Test02 page and jump to the History page: 2
// Go to Test01 and go to History: 3
Copy the code

back()

You can use it to go back and forth to the previous page, just like the browser’s back button

history.back();
Copy the code

forward()

You can jump to the next page, acting like a forward button in your browser

history.forward();
Copy the code

go()

Can be used to jump to a specified page. It takes an integer as an argument

  • 1: forwards a pageforward()
  • 2: indicates that two pages are forwarded
  • -1: forwards one pageback()
  • -2: indicates that two pages are forwarded
history.go(2);
Copy the code

history.go(-2);
Copy the code

4, the Location

If you print location directly, you get the information in the address bar (the full path to the current page)

alert(location); / / http://127.0.0.1:8848/Demo/17-04-Location.html
Copy the code

If you change the location property directly to a full path, or relative path, our page will automatically jump to that path and generate the corresponding history

location = "http://www.baidu.com";
Copy the code

location = "17-03-History.html";
Copy the code

Other attribute methods

assign()

It is used to jump to other pages in the same way as if you were modifying the location directly

History records are generated and can be rolled back using the back button

location.assign("http://www.baidu.com");
Copy the code

replace()

You can use a new page to replace the current page, the call will also jump to the page

History records are not generated and cannot be rolled back using the rollback button

location.replace("17-03-History.html");
Copy the code

reload()

Used to reload the current page in the same way as the refresh button (F5)

location.reload();
Copy the code

If you pass a true in the method as an argument, it forces the cache to clear and refresh the page (Ctrl + F5)

location.reload(true);
Copy the code