js knowledge collection on BOM operations-JS Tutorial-php.cn

This time I will bring you the knowledge about BOM operations in js. What are the precautions for BOM operations in js? The following is a practical case, let’s take a look.

1. What is BOM?

BOM: Browser Object Model is a browser object model. The browser object model provides an object structure that is independent of content and can interact with the browser window. The BOM is composed of multiple objects, which represents the browser. The window object of the window is the top-level object of the BOM, and other objects are sub-objects of this object.

2. Mind map about BOM knowledge

js knowledge collection on BOM operations

3. Introduction to mainstream browsers

The browser kernel mainly refers to Browser rendering engines, before 2013, represented Trident (IE), Gecko (firefox), Webkit (Safari chrome, etc.) and Presto (opera). In 2013, Google began to develop the blink engine, which was used after Chrome 28. Opera gave up its self-developed Presto engine and threw itself into the arms of Google. It worked with Google to develop the blink engine. Various domestic chrome browsers (360, UC, QQ, 2345, etc.) have also given up on webkit and embraced blink.

The mobile browser kernel mainly refers to the kernel of the system’s built-in browser.

Currently commonly used kernels on mobile device browsers include Webkit, Blink, Trident, Gecko, etc. Among them, Apple iOS platforms such as iPhone and iPad mainly use WebKit. The Android system browser kernel before Android 4.4 is WebKit, and Android4 .4 The system browser is switched to Chromium, the kernel is Blink, a branch of Webkit, and the Windows Phone 8 system browser kernel is Trident.

4. BOM object

The window object is the top-level object of JS, and other BOM objects are attributes of the window object;

document object, document object;

location object, the current URL information of the browser;

navigator object, the browser itself information;

screen object, the client screen information;

history object , Browser access history information;

1) Window object: The core object of BOM is window, which represents an instance of the browser. In the browser, the window object has a dual role. It is not only an interface for accessing the browser window through javascript, but also a Global object specified by ECMAScript.

All JavaScript global objects, functions and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Commonly used methods of the window object include

methods of the pop-up box class. Omit the window in front

alert('prompt information')

confirm("confirmation information")
prompt("pop-up input box")
open("url address", "open mode (can be -self or -black)", "the size of the new window") Note: If the url is empty, a blank page will be opened by default. If the opening method is empty, the page will be opened in a new window by default. The return value is: Return the window object of the newly opened window

close() Close the current web page. Note: There are compatibility issues: FF: prohibit setting code that closes the browser

Chrome: close directly by default

IE: ask the user

window.moveTo() - mobile Current window

window.resizeTo() - Adjust the size of the current window

Timer, clear the timer.

setTimeout(function, time) Execute only once

setInterval(function, time) Execute infinitely

clearTimeout/clearInterval(timer name) Clear the timer

2),

location object

window.location object: used to obtain the address (URL) of the current page and redirect the browser to a new page. You can write without using the window prefix.

location.herf = 'url address'
hash Returns the string after the # sign. It does not contain the hash, otherwise an empty string is returned.
host returns the server name and port number
pathname returns the directory and file name. /project/test.html
search returns? All values after the number.
port Returns the specified port number in the URL. If the URL does not contain the port number, an empty string is returned.

portocol Returns the protocol used by the page. http: or https:

3), navigator object

window.navigator object contains information about the visitor's browser. You can write without using the window prefix.

navigator.platform: operating system type;

navigator.userAgent: User-Agent string set by the browser.

navigator.appName: browser name;

navigator.appVersion: browser version;

navigator.language: browser setting language;

userAgent is the most commonly used attribute and is used to complete browser judgment.

if(window.navigator.userAgent.indexOf(&#39;MSIE&#39;)!=-1){  
       alert(&#39;我是IE&#39;);  
   }else{  
       alert(&#39;我不是IE&#39;);  
   }

Copy after login

4), screen object

window.screen object contains information about the user's screen.

The screen.availWidth property returns the width of the visitor's screen, in pixels, minus interface features such as the window taskbar. The screen.availHeight property returns the height of the visitor's screen, in pixels, minus interface features such as the window taskbar.

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

Copy after login

5), history object

window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
 history.back() - 加载历史列表中的前一个 URL。返回上一页。
 history.forward() - 加载历史列表中的下一个 URL。返回下一页。                                                                                             
 go(“参数”) -1表示上一页，1表示下一页。

Copy after login

Based on the above, the methods for page jump are:

1、window.location.href = &#39;你所要跳转到的页面&#39;;  
2、window.open(&#39;你所要跳转到的页面’);  
3、window.history.back(-1):返回上一页  
4、window.history.go(-1/1):返回上一页或下一页五、  
5、history.go("baidu.com")；

Copy after login

5. Window Size and Size

可视区尺寸：  document.documentElement.clientWidth                                                                                                                             
document.documentElement.clientHeight
滚动条滚动距离： document.documentElement.clientScrollTop                                                                                                                          
document.documentElement.clientScrollLeft

Copy after login

There is a compatibility issue (Chrome is different from other browsers), the solution is as follows

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;  
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

Copy after login

Content height/width: element.scrollHeight/scrollWidth

The distance between the mouse and the visible area of the page when a time occurs: clientX/clientY

6. System dialog box

alert()、confirm()和prompt()
<script type="text/javascript">
       alert("Hello world!");    </script>
<script type="text/javascript">
   /*
   判断用户点击了OK还是Cancel，可以检查confirm()方法返回的布尔值：true表示单击了OK，false表示单击了Cancel或单击了右上角的X按钮。
    */
       if (confirm("Are you sure?")) {
           alert("I&#39;m so glad you&#39;re sure! ");
       } else {
            alert("I&#39;m sorry to hear you&#39;re not sure. ");
       }    </script>
<script type="text/javascript">
   /*
   prompt()方法用来生成一个"提示"框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显示一个文本输入域，用来输入文本内容。该方法接收两个参数：要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
    */
       var result = prompt("What is your name? ", "");        if (result !== null) {
        alert("Welcome, " + result);
       }    </script>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!