a global scope
Global variables will become properties of the window object
There is still a difference between defining global variables and defining properties directly on the window object: global variables cannot be deleted by delete, while properties defined directly on the window object can be
var age = 29 window.color = "red"; // throws error in IE<9, returns false in all other browsers delete window.age; // throws error in IE<9, returns true in all other browsers delete window.red; alert(window.age) //29 alert(window.red) undefined
The window property added using the var statement has a property named [[configurable]] which is set to false, so properties defined in this way cannot be deleted by the delete operator
Attempting to access an undeclared variable throws an error, but by querying the window object, you can tell if a possibly undeclared variable exists
// throws error because oldValue is undefined var newValue = oldValue； // No error will be thrown here, this is a property query var newVlaue = window.oldValue;
Two window relationship and frame
If the page contains frames, each frame has its own window object, which is stored in the frames collection, and the corresponding window object can be accessed by numerical index or frame name. Every object has a name property. It is best to refer to these frames through the top object rather than window. For example top.frames[0], top.frames["topFrame"]
The top object always points to the highest (outer) layer of the frame, and the other window object opposite to top is the parent, which always points to the immediate upper frame of the current frame. In some cases parent may be equal to top, but in the absence of a frame, parent must be equal to top (in this case they are both equal to window)
All of these objects are properties of the window object, which can be accessed through window.top, window.parent, etc., or window.parent.parent.frames[0]
Three window positions
The position of the window relative to the left and top of the screen is screenLeft and screenTop in ie, safari, opera and chrome, and screenX and screenY in firefox. Although opera supports screenX and screenY, it does not correspond to screenLeft and screenTop. Get the position of the left and top of the window across browsers
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft:window.screenX
var topPos = ............................................... .................................................. .................................................. .......
Due to the characteristics of each browser, it is impossible to obtain the precise coordinates of the left and top of the window under cross-browser conditions. However, it is possible to move the window to a new position using moveTo() and moveBy(). Both methods receive two parameters, just like the difference between to and by in English. . . One is where to move, the other is how much to move, but these two methods are disabled by default in opera and ie7 (and later versions), and these two methods are not suitable for the framework, only for the outermost window. object use.
Four window size
In ie9+, firefox, safari, outerWidth and outerHeight return the size of the browser window itself (whether accessed from the outermost window object or from a frame), in opera, the values of these two properties represent the size of the page view container size, while innerWidth and innerHeight represent the size of the page view area in the container. In chrome, outerWidth, outerHeight return the same value as innerWidth, innerHeight, i.e. viewport size not browser window size. ie8 and earlier versions do not provide properties to get the size of the current browser window, however, it provides information about the visible area of the page through the DOM
In ie, firefox, safari, opera and chrome, document.documentElement.clientWidth and document.documentElement.clientHeight save the viewport information. In IE6, these properties must be valid in standard mode. If it is promiscuous mode, The same information must be obtained through document.body.clientWidth and document.body.clientHeight, and for chrome in promiscuous mode, the viewport can be obtained regardless of the clientWidth and clientHeight properties in document.documentElement or document.body. size
The resizeTo() method receives the new width and height of the browser window, and the resizeBy() method receives the difference between the width and height of the new window and the original window
5. Navigating and opening windows
The window.open() method can either navigate to a specific url or open a new browser window. This method accepts 4 parameters: the URL to load, the window target, an attribute string, and a boolean value indicating whether the new page should replace the currently loaded page in the browser's history. Usually only the first parameter needs to be passed, and the last A parameter is only used without opening a new window
var newWin = window.open("http://www.baidu.com",target="topFrame","height=400,width=400,top=10,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no")
newWin.resizeTo(500,500);
newWin.moveTo(100,100);
newWin.close();
newWin.closed //true
newWin.opener = window //true opener property points to the original window that opened it
The value of the second parameter can be the name of an existing window or frame. If it does not exist, a new window will be created and named as the set value. In addition, you can also pass some special window names _self, _parent, _top, _blank
Some browsers (such as ie and chrome) will run each tab in a separate process, when one tab opens another, if the two window objects need to communicate with each other, then the two tabs cannot Running in a separate process, in chrome, setting the opener property of the newly created tab to null means running the new tab in a separate process
Check if your browser blocks pop-ups
var blocked = false;
try{
var newWin = window.open("http://www.baidu.com","_blank");
if(newWin == null){
blocked = true;
}
}catch(ex){
blocked = true;
}
if(blocked){
alert("The popup was blocked!");}
Six intermittent calls and timeout calls
javascript is a single threaded language.
var timeoutId = setTimeout(function(){alert("hello")},1000); //Add the current task to the queue after 1000s
clearTimeout(timeoutId)
var intervalId = setInterval(function(){alert("hello js")},1000);
clearInterval(intervalId)
It is recommended to use a timeout call instead of an intermittent call, as the latter intermittent call may start before the previous one ends, which can be avoided entirely if the effect of the intermittent call is simulated with a timeout call
Seven system dialogs
alert() confirm() prompt() The dialogs opened by these methods are synchronous and modal
alert() is used to generate an alert, the user can only close the dialog after reading the message
confirm() generates a dialog box where the user can click ok or cancel, click ok, the confirm() method will return a true, click false or the x in the upper right corner, the confirm() method will return false
prompt() generates a prompt box to prompt the user to enter some text, the prompt method receives two parameters, the first is the text prompt displayed to the user and the default value of the text input field (can be an empty string), prompt The return result is the content of the text input field, or null if the user clicks cancel or closes the dialog by other means