8.1window objects
BOM is the core object window, it represents an instance of the browser. An interface is both javascript to access the browser window, but also a Global ECMAScript objects specified. This means that any object, variables, and functions defined in the web page, are the window as its Global objects, and therefore have access to parseInt () methods.
8.1.1 global scope
Because the window object while the role played by the Global ECMAScript objects, so all variables declared in global scope, the function will become properties and methods of the window object. chestnut:
var age = 29;
function sayAge() {
alert( this.age )
}
alert ( window.age ) //29
sayAge () // 29
window.sayAge() //29
Explanation: We define the variables age and function sayAge in global scope (), they are automatically classified in the window object name. Thus, the variable can be accessed by window.age Age, by window.sayAge () function to access sayAge ().
8.1.3 Window Position
1: Get the window position
screenLeft / screenTop / screenX / screenY
Ie, Safari, Opera, Chrome browser provides screenLeft and screenTop properties to determine the window window position.
Fixefox, Safari, Chrome support screenX and screenY.
Cross-browser window to obtain the position of the left and top edges. chestnut:
var leftPos = ( typeof window.screenLeft == "number")?window.screenLeft : windon.screenX;
var topPos = ( typeof window.screenTop == "number")?window.screenTop : window.screenY;
2: moving window position
moveTo () accepts two parameters. x and y coordinate values of the new location, moveBy () accepts the mobile number of pixels in the horizontal and vertical directions. chestnut:
// move the window to the top left corner of the screen
window.moveTo(0,0);
// move the window 100 pixels down
window.moveBy(0,100)
// move the window to (200, 300)
window.moveTo(200,300)
// move the window 50 pixels to the left
window.moveBy(-50,0)
Explanation: These two methods may be disabled browser; these two methods are not applicable to the framework, only the outermost layer of the window object apply.
8.1.4 Window Size
1: Get the window size
innnerWidth / innnerHeight / outerWidth / outerHeight / document.documentElement.clientHeight / document.documentElement.clientWidth / document.body.clientWidth / document.body.clientHeight get the page viewport size.
chestnut:
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if( typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat") {// document.compatMode page is in standard mode
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
2: Resize the window
resizeTo () / resizeBy () to adjust the size of the browser window. These two methods accepts two parameters.
the resizeTo () received a new height and new browser window width. () With the original difference between the received new window width and height of the window resizeBy. chestnut:
// adjust to 100 * 100
window.resizeTo(100,100)
// adjust to 200 * 150
window.resizeBy(100,50)
// adjust to 300 * 300
window.resizeTo(300,300)
8.1.5 Navigation and open windows
1: pop-up window
window.open () to navigate to a specific URL, you can also open a new browser window.
This method accepts four parameters: To load the URL, target window, a specific string, represents a new page whether to replace the browser history Boolean value currently loaded page. Usually only pass the first argument, the last parameter is used only without opening a new window.
// 等同于 <a href = "http://www.wrox.com" target = "topFrame" ></a>
window.open("http://www.wrox.com", "topFrame")
Explanation: The second parameter can be: _self, _parent, _top, _blank
Some browsers do not allow resize or move the position for the main browser window, but can be adjusted to create a window through window.open (). chestnut:
var wroxWin = window.open('http://www.wrox.com','topFrame','height=400,width=400,top=10,left=10,resizeable=yes')
// adjust size
wroxWin .resizeTo(500,500);
wroxWin.moveTo(100,100);
// close () method can also close a newly opened window
wroxWin.close () but this method only apply to window.open () open windows
The opener is set to null to tell the browser to create a new tab is not required, so you can run it with the open tabs in a separate process communication. Once the link between the tabs off, there will be no way to recover. chestnut:
wroxWin.opener = null
2: pop-up blocker program
If a browser extension or other procedures to prevent the pop-up window, then window.open () usually throws an error. Thus, if you want to accurately detect popup window is shielded, the return value must be detected at the same time, will window.open () call encapsulated in a try-catch block. chestnut:
var blocked = false;
try{
var wroxWin = window.open("http://www.wrox.com","_blank")
if(wroxWin == null){
blocked = true;
}
}catch(ex){
blocked = true
}
if(blocked){
alert("the popup was blocked!")
}
8.1.6 intermittent calls and calls timeout
1：setInterval
// not recommended to pass a string!
the setInterval ( "Alert ( 'the Hello World!')", 10000);
// recommended is called
the setInterval (function () {
Alert ( "the Hello World!");
}, 10000);
2：setTimeout
timeoutId the setTimeout = var (function () {
Alert ( "the Hello World!");
}, 1000);
// Note: it Cancel
clearTimeout (timeoutId);
3: Alternative intermittent call
In the development environment, rarely used real intermittent call, because after a batch before the end of the call may be a call to the front intermittent start.
And like the previous example to use a timeout to call as this is completely avoidable. So, it is best not to use a batch call
NUM = 0 var;
var max = 10;
function incrementNumber () {
NUM ++;
// if the number of executions has not reached the value max set, the set time-out call to another
IF (NUM <max) {
the setTimeout (incrementNumber, 500);
the else {}
Alert ( "the Done");
}
}
the setTimeout (incrementNumber, 500);
