Browser Object Model -- browser ObjectModel (BOM)
1, Window properties
There are three ways to determine the size of the browser window (browser viewports, excluding toolbars and scroll bars).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:
window.innerHeight - the internal height of the browser window
window.innerWidth - the internal width of the browser window
For Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
perhaps
document.body.clientHeight
document.body.clientWidth
For example:
<!DOCTYPE html> <html> <head> <title>window attribute</title> <meta charset="utf-8"> </head> <body> <script> //BOM object //Browser Object Model (BOM) -- browser object model //BOM object - > window object //Width object properties //Size of browser serial port [excluding toolbar and wheel bar] //For Internet Explorer, Chrome, Firefox, Opera, and Safari //widow. innerHeight -- internal height of browser serial port //window.innerWidth -- the internal width of the browser window /*window.onload=function(){ var h=window.innerHeight; var w=window.innerWidth; document.write("<h4>"+w+"x"+h+"</h4>"); };*/ //1280x577 //For Internet Explorer 8, 7, 6, 5: //document.documentElement.ClientHeight //document.documentElement.Clientwidth //perhaps //document.body.clientHeight //document.body.clientWidth /*window.onload=function(){ //var w=document.documentElement.clientWidth; //var h=document.documentElement.clientHeight; var w=document.body.clientWidth; var h=document.body.clientHeight; document.write("<h1>"+w+"x"+h+"</h1>"); }*/ //Practical JavaScript scheme (covering all browsers): window.onload=function(){ var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; document.write("<h1>"+w+"x"+h+"</h1>"); } </script> </body> </html>
2, Method of window object
The open() method is used to open a new browser window or find a named window
Format: window.open(URL,name,features,replace)
URL
An optional string that declares the URL of the document to be displayed in a new window. If this parameter is omitted or its value is an empty string, no document will be displayed in the new window.
name
An optional string that is a comma separated list of features, including numbers, letters, and underscores, that declares the name of the new window. This name can be used as the value of the attribute target of the tags < a > and < form >. If this parameter specifies an existing window, the open() method does not create a new window, but only returns a reference to the specified window. In this case, features are ignored.
features
An optional string that declares the characteristics of the standard browser to be displayed in the new window. If this parameter is omitted, the new window will have all standard features.
replace
An optional Boolean value. Specifies whether the URL loaded into the window creates a new entry in the window's browsing history or replaces the current entry in the browsing history. The following values are supported:
True - the URL replaces the current entry in the browsing history.
False - the URL creates a new entry in the browsing history.
Important: do not confuse the method Window.open() with the method Document.open(), which have completely different functions. To make your code clear, use Window.open() instead of open ().
The close() method is used to close the browser window.
Description: the method close() will close the top-level browser window specified by window. A window can close itself by calling self.close() or just close ().
Only windows opened through JavaScript code can be closed by JavaScript code. This prevents malicious scripts from terminating the user's browser.
For example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window Object method</title> <script> //BOM object //Browser Object Model (BOM) -- browser object model //Method of window object -- global method //1.open() -- open a new window //1.1 URL -- optional string, the URL of the document displayed in the new window //1.2 name --- optional string, the name of the new window //1.3 feature --- optional string, the feature of the standard browser to be displayed in the new window //1.4 replace --- optional Boolean value /* true--URL-- Replace current entry in browsing history false-- URL--Create a new entry in the browser */ function testopen(){ //window.open("open.html","open","width=400,height=400",true) window.open("http://www.baidu.com / "," Baidu "," width=400,height=400",true) } //close() -- close the current window /*function testclose(){ window.close() }*/ //2. Pop up method //Warning box window.alert("sometext"); //Confirmation box: window.confirm("sometext"); //1. There is a boolean return value //true --- click OK //false -- you click Cancel function testclose(){ var res = window.confirm("Are you sure to close the current page?") if(res==true){ window.close(); } } //Prompt box: window.prompt("sometext","defaultvalue"); //sometext --- string, prompt information //defaultvalue --- string, default value //Return value: 1. Click OK, and the return value will be the entered value // 2. Click Cancel, and the return value is null function testPrompt(){ var usename= window.prompt("enter one user name:","admin"); if(usename==null){ alert("cancel"); }else{ alert("confirm"+usename); } } //Figure guessing game var number=Number.parseInt(Math.random()*100); number=number+1; function caiNumber(){ var num = window.prompt("Please enter a 1~100 Number of:","0"); if(num>number){ alert("The input is too large!") }else if(num<number){ alert("The input is too small!") }else if(num==number){ alert("game over!") } } </script> </head> <body> <input type="button" value="open" onclick="testopen()"/> <input type="button" value="close" onclick="testclose()"/> <input type="button" value="prompt box" onclick="testPrompt()"/> <input type="button" value="Guess the number" onclick="caiNumber()"/> </body> </html>
3, Window sub object
1.window Screen -- screen
The window.screen object contains information about the user screen.
- Total width and height --- screen.width / screen.height
- Available width and height ----- screen.availWidth / screen.availHeight
- Color depth ---- screen.colorDepth
- Color resolution ---- screen.pixelDepth
2.window Location --- the address (URL) of the page
Object is used to get the address (URL) of the current page and redirect the browser to a new page.
1. The location.href property returns the URL of the current page.
2. The location.search property is a readable and writable string that can set or return the query part of the current URL (the part after the question mark?).
3.window History - historical object
1.history.back() - the same as clicking the back button in the browser
2.history.forward() - the same as clicking forward in the browser
4.window Navigator -- browser information
The window.navigator object contains information about the visitor's browser.
1. For example: window.screen. xxx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window screen--screen</title> <script> //window screen -- screen //1. Total width and height --- screen.width/screen.height //2. Available width and height - screen.availwidth/screen.availheight //3. Color depth - screen.colorDepth //4. Color resolution ---- screen.pixelDepth window.onload=function(){ //Total width and height var wid=window.screen.width; var hei=window.screen.height; document.write("<h2>Total width and height=="+wid+"*"+hei+"</h2>"); //Available width and height var availWidth=window.screen.availWidth; var availHeight=window.screen.availHeight; document.write("<h2>Available width and height=="+availWidth+"*"+availHeight+"</h2>"); //Color depth var colorDepth=window.screen.colorDepth; document.write("<h2>Color depth=="+colorDepth+"</h2>"); //Color resolution var pixelDepth=window.screen.pixelDepth; document.write("<h2>Color resolution=="+pixelDepth+"</h2>"); } </script> </head> <body> </body> </html>
2. For example: window Location.xxx
Create user login information interface test4.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>widow Object's children-widow.Location.xxx</title> <script> //window Location --- the address (URL) of the page //The location.href property returns the URL of the current page. [jump] //The location.search property is a readable and writable string that can set or return the query part of the current URL (the part after the question mark?). //url---http://127.0.0.1:8080/login?username=zhangsan&password=123456 //location.search----?username=zhangsan&password=123456 function login(){ var username=document.getElementById("inp1").value; var pass=document.getElementById("inp2").value; if(username=="fxt"&&pass=="123456"){ window.location.href="login.html?username="+username+"&passworld="+pass; } } </script> </head> <body> <table border="1px"> <tr align="center"> <td><h4>User login</h4></td> </tr> <tr align="center"> <td> <input id="inp1" type="text" placeholder="enter one user name"> </td> </tr> <tr align="center"> <td> <input id="inp2" type="password" value=""/> </td> </tr> <tr align="center"> <td> <input id="but" type="button" value="Sign in" onclick="login()"/> </td> </tr> </table> </body> </html>
Create login.html, link the login interface and return the user name to the HTML page when the user logs in
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>widow Object's children-widow.Location.xxx</title> <script> window.onload=function(){ //Get the search value of the URL var str= window.location.search;//?username=fxt&password=123456 var str1= str.split("&")//Use & to divide the obtained string into a string array //alert(str1[0])//?username=fxt //Continue splitting the [0] value in the resulting str1 var name=str1[0].split("="); //alert(name[1]);//fxt //Get the dom object of the first span var hdom=document.getElementsByTagName("span")[0]; hdom.innerHTML=name[1]; } </script> </head> <body> <h2>welcome<span>you</span>Login interface</h2> </body> </html>
3. For example: window History - history object
Create three pages to jump
test5.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //window History --- history object //history.back() - the same as clicking the back button in the browser [previous] //history.forward() - the same as clicking forward in the browser [next] function toNext(){ window.history.forward(); } </script> </head> <body> <h1>First test page</h1> <a href="test5-2.html">Connect to the second test page</a><br> <input type="button" value="forward" onclick="toNext();"/> </body> </html>
test5-2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function toNext(){ window.history.forward(); } function toback(){ window.history.back(); } </script> </head> <body> <h1>Second test page</h1> <a href="test5-3.html">Connect to the second test page</a><br> <input type="button" value="forward" onclick="toNext();"/> <input type="button" value="back off" onclick="toback();"/> </body> </html>
test5-3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function toback(){ window.history.back(); } </script> </head> <body> <h1>Third test page</h1> <h5>Connect to the second test page</h5> <input type="button" value="back off" onclick="toback();"/> </body> </html>
4. For example: window Navigator -- browser information
Document.write ("< H1 > browser code:" + window. Navigator. Appcodename + "< / H1 >");
Document.write ("< H1 > browser name:" + window. Navigator. AppName + "< / H1 >");
Document.write ("< H1 > browser version:" + window. Navigator. AppVersion + "< / H1 >");
Document.write ("< H1 > enable Cookies:" + window. Navigator. Cookie enabled + "< / H1 >");
Document.write ("< H1 > Hardware Platform:" + window. Navigator. Platform + "< / H1 >");
Document.write ("< H1 > User Agent:" + window. Navigator. Useragent + "< / H1 >");
Document.write ("< H1 > user agent language:" + window. Navigator. SystemLanguage + "< / H1 >");
V JavaScript timing event
Execute code after a set interval, rather than immediately after the function is called
etInterval() - executes the specified code continuously for the specified number of milliseconds.
/The clearInterval(intervalVariable) method is used to stop the function code executed by the setInterval() method.
For example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //JavaScript timing event //Execute code after a set interval, rather than immediately after the function is called //setInterval() - executes the specified code continuously for the specified number of milliseconds. //The clearInterval(intervalVariable) method is used to stop the function code executed by the setInterval() method. window.onload=function(){ var returnValue; document.getElementById("btu1").onclick=function(){ function getdate(){ var date1 = new Date(); var datetime=date1.getFullYear()+"year"+ (date1.getMonth()+1)+"month"+ date1.getDate()+"day "+ date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds(); document.getElementsByTagName("h3")[0].innerText=datetime } returnValue= window.setInterval(function(),1000); } document.getElementById("btu2").onclick=function(){ window.clearInterval(returnValue); } } </script> </head> <body> <input id="btu1" type="button" value="Start timing"/> <input id="btu2" type="button" value="Stop timing"/> <h3></h3> </body> </html>