Basic operation of Browser windows in JavaScript summary _javascript tips

Window position

"1" Get

The browser (not supported by Firefox) provides screenLeft and screenTop properties that represent the position of the window relative to the left and top of the screen

In the case where the window is maximized, the values returned by each browser are not the same when you run the following code. Chrome returns to left:0;top:0. IE returns LEFT:0;TOP:56 (if there is a menu bar, return left:0;top:78), because IE saves the distance from the left and top of the screen to the visible area of the page represented by the Window object. Safari returns to Left:-8;top:-8 due to its own bugs

Move the window, there will be numerical changes
<div id= ' mydiv ' ></div>
<script>
var timer = setinterval (function () {
 mydiv.innerhtml = ' Left: ' + Window.screenleft + '; Top: ' + window.screentop;
}
Mydiv.onclick = function () {
 clearinterval (timer);
}
</script>

Result:left:0;top:93

　　screenXand screenY attributes (ie8-) also provide the same window location information

[note] screenLeft , screenTop ,, screenX and screenY are read-only properties, modify their values and do not cause the window to move

In the case where the window is maximized, the values returned by each browser are still different. Firefox returns to Left:-7;top:-7. Chrome still returns to left:0;top:0. ie9+ always returns LEFT:-7;TOP:-7, regardless of whether or not the menu bar is displayed. Safari is still returning to Left:-8;top:-8 due to its own bugs.

<div id= ' mydiv ' ></div>
<script>
var timer = setinterval (function () {
 mydiv.innerhtml = ' Left: ' + Window.screenx + '; Top: ' + Window.screeny;
}
Mydiv.onclick = function () {
 clearinterval (timer);
}
</script>

Result:left:0;top:93

Compatible

Gets the compatible wording of the window position as follows

[note] Due to different browser implementations, it is not possible to get exact coordinate values across browser conditions

 var leftpos = (typeof Window.screenleft = "number")? Window.screenLeft:window.screenX;
 var toppos = (typeof window.screentop = "number")? Window.screenTop:window.screenY;
 

"2" mobile

Use moveTo() and moveBy() methods can move the window to a new location precisely, both of which are supported by IE browsers

　　moveTo()Receives two parameters, which are the x and Y coordinate values of the new position, respectively

<div id= "Mydiv" > click here </div>
<script>
//Move window to (0,0)
Mydiv.onclick = function () {
 Window.moveto (0,100); 
} 
</script>

moveBy()receives two parameters, moving the number of pixels in both horizontal and vertical directions, respectively.

<div id= "Mydiv" > click here </div>
<script>
//Move the window down by 100 pixels
Mydiv.onclick = function () {
 Window.moveby (0,100); 
} 
</script>

Window size

"1" Get

　　outerWidthAnd outerHeight properties are used to indicate the size of the browser window itself

Attention ie8-Browser does not support

Chrome back to outerwidth:1920;outerheight:1030
//ie9+ and Firefox back to outerwidth:1550;outerheight:838 
// Safari returns outerwidth:1552;outerheight:840
Document.body.innerHTML = ' outerwidth: ' + window.outerwidth + '; o Uterheight: ' + window.outerheight

Result:outerwidth:1440;outerheight:743

　　innerWidthAnd innerHeight properties are used to represent the page size, which is actually equal to the browser window size minus the width of the browser's own border and the menu bar, address bar, status bar, and so on

[note] because the <iframe> itself has window properties, if there is a frame in the page, the and attributes in the frame refer to the innerWidth innerHeight frame itself innerWidth and the innerHeight attributes

Chrome back to innerwidth:1920;innerheight:971
//ie9+ return innerwidth:1536;innerheight:768 
// Firefox returns innerwidth:1536;innerheight:755
//safari returns innerwidth:1536;innerheight:764
Document.body.innerHTML = ' innerwidth: ' + window.innerwidth + '; innerheight: ' + window.innerheight

Result:innerwidth:701;innerheight:40

The and in the DOM document.documentElement.clientWidth document.documentElement.clientHeight can also represent the page size, and innerWidth innerHeight return the same value as and

[note] Similarly, if you access frames, these two properties also point to the properties of the frame

Chrome back to innerwidth:1920;innerheight:971
//ie9+ return innerwidth:1536;innerheight:768 
// Firefox returns innerwidth:1536;innerheight:755
//safari returns innerwidth:1536;innerheight:764  
Document.body.innerHTML = ' clientwidth: ' + document.documentElement.clientWidth + '; clientheight: ' + Document.documentElement.clientHeight

Result:clientwidth:701;clientheight:40

Although these two types of properties represent the same value at the computer end, they have different uses on the mobile side. innerWidthand innerHeight represents the visual viewport, the area of the site that the user is seeing, document.documentElement.clientWidth and the clientHeight layout viewport, which refers to the size of the CSS layout.

"2" Adjustment

Use resizeTo() and resizeBy() these two methods can be used to resize the browser window

[note] only IE and safari browsers support

　　resizeTo()Receive two parameters: new width and new height of browser window

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 //Resize the browser window to 200.
 Window.resizeto (200,200);

　　resizeBy()Receive two parameters: the difference between the width and height of the new browser window and the original window

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 //Reduce browser window width by 100
 Window.resizeby ( -100,0);
}

Open a Window

　　window.open()method to navigate to a specific URL or to open a new browser window. This method receives 4 parameters: the URL to load, the window target, an attribute string, and a Boolean value that indicates whether the new page replaces the currently loaded page in the browser history

Parameters

"1" Usually only needs to pass the first argument, which is opened by default in a new window

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 window.open ("http:/ /baidu.com ");
}

"2" The second parameter indicates the name of the existing window or frame, or the window open _self, _parent, _top, _blank, and so on

<div id= "Mydiv" > click here </div>
<script>
//Open in current window
Mydiv.onclick = function () {
 window.open ("http://baidu.com", ' _self ');
}
</script>

"3" The third argument is a comma-delimited set string that indicates which attributes are displayed in the new window

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 //open height to 500 in new window Width is 500, ordinate is 0, the horizontal axis is 200 QQ webpage
 window.open ("http://qq.com", "_blank", "height=500,width=500,top=0,left=200")
} 
</script>

The fourth parameter of "4" is only useful if the second argument is named an existing window. It is a Boolean value that declares whether the URL specified by the first argument is the current entry (true) for the application to replace the window's browsing history, or whether a new entry (false) should be created in the window browsing history, which is the default setting

return value

　　open()The return value of the method is the Window object for new windows

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 var w = window.open ();
 w.document.body.innerhtml = ' Test text ';
}
</script>

The newly created Window object has a opener property that holds the original window object that opened it

<div id= "Mydiv" > click here </div>
<script>
mydiv.onclick = function () {
 var w = window.open ();
 Console.log (W.opener = = window);//true
}
</script>

Filter

Most browsers have pop-up filtering systems. Typically, a open() method is invoked only if the user manually clicks a button or link. JavaScript code attempts to open a pop-up window when the browser is initially loaded, usually fails. If it is blocked, the return value isundefined

<div id= "Mydiv" > click here </div>
<script>
var w = window.open ();
Console.log (w);//undefined
</script>

Window close

Just as open() a method opens a new window, the method close() closes a window. If you have created a Window object W, you can use the following code to turn it off

<div>
 <span id= "span1" > Open window </span>
 <span id= "span2" > Close window </span> 
</div>
<script>
var W;
Span1.onclick = function () {
 w = window.open ();
}
Span2.onclick = function () {
 if (w) {
  w.close ();
 }
}
</script>

The new window's Object W also has an closed attribute to detect whether it is closed

<div id= "Mydiv" > click here </div>
<script>
//show true
Mydiv.onclick = function () after first displaying false,1s {
 var w = window.open ();
 Console.log (w.closed);//false
 settimeout (function () {
  w.close ();
  Console.log (w.closed);//true
 },1000);
 
}
</script>

Small application

window.open()you can manipulate the opening and closing of a newly opened window by returning an object

<div id= "mydiv" > Open window </div>
<script>
 var w = null;
 Mydiv.onclick = function () {
  //If w does not exist, the new window is not opened, or the new window is closed if
  (!w) {
   w = window.open ("http://baidu.com", "_ Blank "," height=400,width=400,top=10,left=10 ");
   mydiv.innerhtml = ' Close window ';
  If w exists, the description of the new window is opened
  }else{
   w.close ();
   W = null;
   mydiv.innerhtml = ' open window ';
  }
 }
</script>

Summarize

This article mainly introduces the JavaScript browser window's basic operation, the understanding is very simple, but the very practical function, hoped that can have the help to everybody to use JavaScript everyday.