Home > Developer > JavaScript
The Window:window object is the core of all objects in the BOM, and includes some window control functions in addition to the parent object of all objects in the BOM.
1, the Global Window object
Any global function or variable in JavaScript is a property of window.
<script type= "Text/javascript" > var name= "Shake sacred Cattle"; document.write (window.name); </script>
2, window and self object
The Self object is exactly the same as the Window object, and self is typically used to confirm that it is within the current form.
<script type= "Text/javascript" > document.write (window = self); Must be equal, always equal document.write (window. top = = window.self); It is equivalent to determine whether the current frame is the main frame </script> window, self, and window.self.
3, Window's child objects
The main objects of window are as follows:
JavaScript Document Object
JavaScript Frames Objects
JavaScript History Objects
JavaScript Location Objects
JavaScript Navigator Objects
JavaScript Screen Object
4. Window function index (effective only for IE)
Form control functions:
JavaScript Moveby () function: Moves the form x pixels horizontally from the current position, vertically moves the form y pixels, X is negative, moves the form to the left, and Y is negative, moving the form up.
JavaScript MoveTo () function: Moves the top-left corner of the form to the (x,y) point relative to the upper-left corner of the screen, and moves the form out of the viewable area of the screen when using negative numbers as arguments.
JavaScript Resizeby () function: relative to the current size of the form, width adjustment w pixel, height adjustment h pixel. If the argument is negative, the form is narrowed, and the form is enlarged.
JavaScript Resizeto () function: Adjusts the width of the form to w pixels and height to h pixels.
<body> <input type= "button" id= "BTN1" value= "set the form fixed size first! "Onclick=" Window.resizeto (500,500), "/> <input type=" button "id=" Btn2 "value=" and then reduced by 10 pixels! "Onclick=" Window.resizeby ( -10,-10); "/> <input type=" button "id=" Btn2 "value=" On! "Onclick=" Window.moveby (0,-5); "/> <input type=" button "id=" BTN2 "value="! "onclick=" Window.moveby (0, 5); "/> <input type=" button "id=" Btn2 "value=" Left! "Onclick=" Window.moveby ( -5, 0), "/> <input type=" button "id=" btn2 "value=" right! "Onclick=" Window.moveby (5, 0); "/> <input type=" button "id=" Btn2 "value=" is 100 pixels to the left of the upper left corner, 200 pixel "onclick=" at the top. Window.moveto (m); "/> </body>
Form Scroll axis control function:
JavaScript Scrollto () function: If you have a scroll bar in a form, move the horizontal scroll bar to the position relative to the width of the form x pixels, and move the longitudinal scroll bar to the position of y pixel relative to the form's height.
JavaScript Scrollby () function: If you have a scroll bar, move the horizontal scroll bar to the position of x pixels relative to the current horizontal scroll bar (that is, move x pixels to the left), and move the longitudinal scroll bar to the position of y pixels relative to the current vertical scroll bar height (that is, move y pixels down).
Notice the difference, one is relative to the current window, and one is the position of the scroll bar quite now.
<div style= "height:150%; width:150%; Background-color: #ddd "> <input type=" button "id=" BTN1 "value=" Move scroll bar! "Onclick=" Window.scrollto (100,100); "/>//equivalent to set absolute position <input type=" button "id=" BTN1 "value=" Move scroll bar! "Onclick=" Window.scrollby (100,100); "/>//equals cumulative </div>
Form Focus Control Function:
JavaScript focus () function: Get the form or space focused
JavaScript blur () function: causes a form or control to lose focus
<div>
<input type= "button" value= "gets Focus" onclick= "document.getElementById (' Testinput '). Focusing ()"/>
<input type= "button" value= "Loses focus" onclick= "document.getElementById (' Testinput '). blur ()"/>
< Input type= "text" value= "text" id= "Testinput" onblur= "alert (' I have lost Focus ')"/>
</div>
New Form function:
JavaScript open () function: open (eject) a new form
JavaScript Close () function: Closing a form
JavaScript Opener Properties: You can communicate across forms by opener, but make sure that you are under the same domain name and that one form contains the opener of another form.
window.open(url, name, features, replace);
Open function Parameter Description:
URL--the URL to load the form into;
Name--Creates a new form (also can be the value of the HTML target property, the target);
Features--a string representing the attributes of a form, separated by commas in each attribute of the string;
Replace--A Boolean value that indicates whether the newly loaded page replaces the currently loaded page, and this parameter is usually not specified.
An example of the Open method:
<a href= "2.html" target= "2" > Open Connection in New window </a>
<a href= "# onclick=" window.open (' http://so.jb51.net/') , ' 2 '); > Open a new address on a connected page </a>
First open a page with a normal HTML link (target named Dreamdu), and then open another page using the Open function, the browser first looks for a form with a name of DREAMDU, and if so, loads the open address in the form.
The Set Open
Window method:
Method One: <body onload= "Openwin ()" > Browser pop-up window when reading the page;
Method Two: <body onunload= "Openwin ()" > Browser out of the page pop-up window;
The third parameter of the Open function features Description:
| Parameter name | type | Description |
|---|---|---|
| Height | Number | Set the height of the form, not less than 100 |
| Left | Number | Description creates the left coordinate of the form, not a negative value |
| Location | Boolean | Whether the form displays the Address bar and the default value is no |
| Resizable | Boolean | Whether the form allows resizing by dragging the edge, the default value is no |
| Scrollable | Boolean | If the interior of the form is outside the window's viewable range, drag is allowed, and the default value is no |
| Toolbar | Boolean | Whether the form displays a toolbar, and the default value is no |
| Top | Number | Shows the top coordinates of the form being created and cannot be negative |
| Status | Boolean | Does the form display a status bar with the default value no |
| Width | Number | Create the width of the form, not less than 100 |
Each attribute in an attribute string is separated by commas, with no spaces allowed between each attribute.
When a new form is created, the Window.Open function returns the Window object for the new form, which allows you to control the form (move, resize, close).
Close function:
<input type= Button "value=" closes the form already open! "Onclick=" Window.close (); "/>
Self.close (), with the settimeout () can be implemented, open the window to the effect of timed shutdown.
dialog box functions:
JavaScript alert () Function: Pop-up message dialog (there is an OK button in the dialog box)
JavaScript confirm () Function: Pop-up message dialog box (contains an OK button and Cancel button in the dialog box)
JavaScript prompt () Function: Pop-up message dialog box (contains an OK button, Cancel button, and a text input box in the dialog box)
alert ();
Don't say.
confirm(str);
The Confirm () Message dialog box is exclusive, which means that no other action can be performed until the user clicks the button on the dialog box.
if (confirm) (OK jump big?) ")"
{
alert ("Resolute hop Big");
}
else
{
alert ("Wretched dozen money");
}
The display is as follows:
prompt(str1, str2);
function has two parameters
STR1-text that you want to appear in the message dialog box, cannot be modified
STR2--The contents of the text box, you can modify
var sresult=prompt ("Please enter your name below", "Shake Sacred Cow");
if (sresult!=null)
{
alert (Sresult + "has exceeded the Kill of God");
}
else
{
alert ("John Doe is beyond the Kill of God");
}
The display is as follows:
Time wait and interval function:
JavaScript settimeout () function
JavaScript cleartimeout () function
JavaScript setinterval () function
JavaScript clearinterval () function
1, settimeout (), cleartimeout () call the function after the specified time
Grammar:
SetTimeout (Fun,time); Fun: function body or function name, time specified in milliseconds.
Cleartimeout (ID); Cancels the code that the specified settimeout function will execute
settimeout (function () {
document.write ("trigger after 3 seconds");
3000)//3 seconds to output
settimeout (FUN1, 5000);//in 5 seconds output function
fun1 () {
document.write ("The method of functions name is triggered after 5 seconds");
2, SetInterval (), clearinterval (value) repeatedly calls the function after the event specified at interval
Grammar:
SetInterval (fun1,time) Fun: function body or function name, time specified in milliseconds. Returns a value that is used to count the number of functions, the first is 1, and the second is 2, which indicates the SetInterval function.
The value returned by the Clearinterval (value) value:setinterval () function to stop the repetition of setinterval ().
var i = 0;
var h = setinterval (function () {
document.write ("3 seconds Output <br/>");
i++;
if (I >= 3) {
clearinterval (h);
document.write ("Stop Output");
}
, 3000);
Note that JavaScript is single-threaded, so the timing function is actually implemented by inserting the execution queue.
As in the following code:
function fn () {
settimeout (function () {alert (' Can you I/I/I? ');},1000);
while (true) {}
}
alert (); will never execute because the thread has been consumed by the dead loop.
Window.location Child Objects
Resolves a URL object location
The properties of the Location object are: Href,protocal,host,hostname,port,pathname,search,hash
document.write (location.href + "<br/>"); http://localhost:4889/javascriptTest.html document.write (location.protocol + "<br/>");//http: document.write (location.host + "<br/>"); localhost:4889 document.write (location.hostname + "<br/>");//localhost document.write ( Location.port + "<br/>"); 4889 document.write (location.pathname + "<br/>");///javascripttest.html document.write ( Location.search + "line change <br/>"); Http://localhost:4889/javascriptTest.html?id=1&name= John If the path is this, then output? id=1&name=%e5%bc%a0%e4%b8%89 document.write (Location.hash); http://localhost:4889/javascripttest.html#kk= Hello? id=1&name= John If the path is this, the output #kk = hello? id=1&name= John
Load New Document
Location.reload () reload page
Location.replace () This window loads a new document
Location.assign () This window loads a new document
Location = "http://so.jb51.net/"//jump to specified URL
Location = "search.html"//relative path jump
Location = "#top"//Jump to top of page
Browse History
The History () object's back () and forward () are the same as the browser's "Rewind" and "forward" functionality.
History.go (-2); Back two historical records
Browser and screen information
Navigator.appname Web Browser Full name
Navigator.appversion a detailed string of Web browser vendors and versions
Navigator.useragent Client Most information
Navagator.platform the operating system where the browser is running
document.write (navigator.useragent + "<br/>"); mozilla/5.0 (Windows NT 6.1) applewebkit/537.11 (khtml, like Gecko) chrome/23.0.1271.97 safari/537.11 document.write (navigator.appname + "<br/>"); Netscape document.write (navigator.appversion + "<br/>");//5.0 (Windows NT 6.1) applewebkit/537.11 (khtml, Like Gecko) chrome/23.0.1271.97 safari/537.11 document.write (navigator.platform);//win32
The relationship of the window
parent = self Only the top-level window returns true
The parent and top properties allow the script to reference the ancestor of its form, which is typically created by the <iframe> element and can be used to get the top-level window.
5, Event Events Object
The two most useful actions: Block event bubbling. sometimes return false; This may work, however.
IE: window.event.cancelBubble = true;//stop bubbling window.event.returnValue = false;//The default behavior of blocking events //firefox: Event.preventdefault ()//Cancel the default behavior of the event event.stoppropagation ();//prevent the propagation of events
The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
