JavaScript Advanced Programming Window/location/navigator/screen/history objects

If you want to use JavaScript in the Web, then the BOM (browser object model) is undoubtedly the most important part. The BOM provides a number of objects, such as window, location, navigator, screen, and history objects, and we'll show you the relevant features of these objects. Start with the Window object, which represents an instance of the browser.

Window object:

First, global scope

The Window object plays the role of the global object in the ECMAScript, so variables and functions declared in the global scope become properties and methods of the Window object However, there are differences between the properties and methods defined in these two ways: global variables cannot be deleted by the delete operator, but can be defined directly on the Window object.

 1  var  age = 29; 2  function   Sayage () { 3  alert (this  .age);  4   5  alert (window.age);  6  sayage ();  7  window.sayage (); 

var = = "Red"// throws error delete window.color;

Ii. window relationships and frameworks

If the page contains frames, each frame has its own window object and is stored in the Frames collection, which can access different window objects in several ways, or through the top object, which always points to the outermost frame, which is the browser window, using it, You can ensure that another framework is properly accessed in one frame.

　Access method:
Three, window position
Different browsers determine the location of the Windows object in different ways, in order to get the location across browsers, we write code as follows:
    var leftpos = (typeof Window.screenleft = = "number")? Window.screenLeft:window.screenX;     var toppos = (typeof Window.screentop = = "Number")? Window.screenTop:window.screenY;
　　Even so, we still cannot get the exact value of the left and top edges of the window in a cross-browser environment: LeftPos and Toppos indicate the coordinate values of the entire browser window relative to the screen, and some need to subtract the pixel height of the browser toolbar.
Four, window size
IE8 and earlier versions did not provide properties to get the size of the current browser window, ie9+ and the rest of the browsers provided outerwidth and Outerheight to return the size of the browser window itself, so we finally couldn't get the size of the browser window in a cross-browser environment. And for the size of the page viewport, we can get:
varPageWidth =window.innerwidth;varPageHeight =Window.innerheight;if(typeofPageWidth! = "Number"){    if(Document.compatmode = = "Css1compat"){        //Standard ModePageWidth =Document.documentElement.clientWidth; PageHeight=Document.documentElement.clientHeight; }Else{        //Promiscuous ModePageWidth =Document.body.clientWidth; PageHeight=Document.body.clientHeight; }}
V. Intermittent calls and timeout calls
Next, we introduce two important functions in javascript: SetTimeout () and SetInterval (). JavaScript is a single-threaded language, but it allows setting time-outs and interval values to dispatch code at a specified time, which refers to executing code after a specified time, while the latter means executing the code once every time.
// Set Timeout Call var timeoutid = setTimeout (function() {    alert ("Hello World");},+); // You can cancel the timeout call cleartimeout (Timeoutid) before timing out the transfer;
// set up intermittent calls var timeoutid = setinterval (function() {    alert ("Hello World");}, ); // Cancel the intermittent call, otherwise it will always execute clearinterval (Timeoutid);
　　Note that the function is not necessarily executed after 1000ms, which is set by the second parameter, because this parameter tells JavaScript to add the current task to the task queue for too long, and if the queue is empty, the added code executes immediately, and if the queue is not empty, Then it needs to wait for the previous task to complete before it executes.
In a development environment, a real intermittent call is seldom used, often using a timeout call to simulate intermittent calls, because it does not have to track the ID of the intermittent call to cancel it (no cancellation will be performed).
Six, System dialog box
The browser uses the alert (), confirm (), and Prompt () methods to invoke the System dialog box to display a message to the user, which is not related to the Web page displayed in the browser and does not contain HTML. Its appearance is determined by the operating system and browser settings, not by CSS.

 
  
 
Location object:
The main function of the location object is that it can parse the URL into separate fragments through its own properties, allowing the developer to easily access:
　　The following example modifies the URL of a page with the function of the HREF, which disables the browser's ability to back to the previous page when replace () is used.
<!doctype html> a second</p>        <script>            setTimeout (  function() {                //  location.href = "http://www.baidu.com";                Location.replace ("http://www.baidu.com");                     </script>    </body>
 
  
 
Navigator object:
Using the Navigator object, you can detect whether the specified plug-in is installed in the browser. IE and other browsers implement plug-ins in different ways, so you need to create the detection function, and then for the specific plug-in detection:
    functionHasplugin (name) {Name=name.tolowercase ();  for(vari = 0; I < navigator.plugins.length;i++){            if(Navigator.plugins[i].name.tolowercase (). INDEXOF (name)! =-1){                return true; }        }        return false; }    functionHasieplugin (name) {Try{            NewActiveXObject (name); }Catch(ex) {return false;    }; }        functionHasflash () {varresult = Hasplugin ("Flash"); if(!result) {Result= Hasieplugin ("Shockwaveflash.shockwaveflash"); }        returnresult; } alert (Hasflash ());
 
  
 
Screen object:
The screen object is used very little in programming, and it contains information about the external display of the browser window, typically used to measure the client's ability in a site tool.

 
  
 
History object:
  when the URL of a page changes, a history is generated, which is what keeps the user's online records. Here are some common things to do:  
// back one page history.go ( -1); // forward one page history.go (1); // forward 2 pages history.go (2); // jump to the nearest www.baidu.com page history.go ("www.baidu.com"); // back one page History.back (); // forward one page History.forward (); // the number of historical records is history.length;
 JavaScript Advanced Programming Window/location/navigator/screen/history objects