Window location
【1】Get
The browser (firefox does not support) provides screenLeft and screenTop properties, which are used to represent the position of the window relative to the left and upper side of the screen respectively.
When the window is maximized, the values returned by each browser are not the same when running the following code. chrome returns left:0;top:0. IE returns left:0;top:56 (if there is a menu bar, it returns left:0;top:78), because IE saves the distance from the left and upper side of the screen to the visible area of the page represented by the window object. safari returns left:-8;top:-8 due to its own bug
//Move the window, there will be a change in the value <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
screenX and screenY properties (IE8-) also provide the same window position information.
[Note] screenLeft , screenTop , screenX and screenY are all read-only properties. Modifying their values will not cause the window to move.
When the window is maximized, the values returned by each browser are still different. firefox returns left:-7;top:-7. Chrome still returns left:0;top:0. IE9+ always returns left:-7;top:-7 regardless of whether the menu bar is displayed or not. safari still returns left:-8;top:-8 due to its own bug
<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
The compatible writing method for obtaining window location is as follows
[Note] Due to the different implementations of each browser, it is impossible to obtain the exact coordinate value under cross-browser conditions.
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; console.log(leftPos,topPos);
【2】Mobile
Use moveTo() and moveBy() methods to move the window to a new location. These two methods are only supported by IE browser.
moveTo() receives two parameters, namely the x and y coordinate values of the new position
<div id="myDiv">Click here</div><script>//Move the window to (0,0) myDiv.onclick = function(){ window.moveTo(0,100); } </script> moveBy() receives two parameters, namely the number of pixels moving in horizontal and vertical directions.
<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
outerWidth and outerHeight properties are used to represent the size of the browser window itself.
[Note] IE8-Browser does not support
//chrome returns outerWidth:1920;outerHeight:1030//IE9+ and firefox return outerWidth:1550;outerHeight:838 //safari returns outerWidth:1552;outerHeight:840document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight:' + window.outerHeight
Result: outerWidth:1440; outerHeight:743
innerWidth and 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 borders and menu bars, address bars, status bars, etc.
[Note] Since <iframe> itself also has window properties, if there is a frame in the page, then innerWidth and innerHeight properties in the frame refer to innerWidth and innerHeight properties of the frame itself.
//chrome returns innerWidth:1920;innerHeight:971//IE9+ returns innerWidth:1536;innerHeight:768 //firefox returns innerWidth:1536;innerHeight:755//safari returns innerWidth:1536;innerHeight:764document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight:' + window.innerHeight
Result: innerWidth:701; innerHeight:40
document.documentElement.clientWidth and document.documentElement.clientHeight in DOM can also represent the page size, returning the same value as innerWidth and innerHeight
[Note] Similarly, if the framework is accessed, these two properties also point to the framework's properties.
//chrome returns innerWidth:1920; innerHeight:971//IE9+ returns 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 attributes represent the same value on the computer, they have different uses on the mobile side. innerWidth and innerHeight represent the visual viewport, that is, the area of the website the user is seeing; document.documentElement.clientWidth and clientHeight represent the layout viewport, referring to the size of the CSS layout.
【2】Adjustment
Use the two methods of resizeTo() and resizeBy() to resize the browser window
[Note] Only IE and safari browsers support
resizeTo() receives two parameters: the new width and new height of the browser window
<div id="myDiv">Click here</div><script>myDiv.onclick = function(){ //Resize the browser window to 200,200 window.resizeTo(200,200);}</script> resizeBy() receives two parameters: the difference between the width and height of the new window of the browser and the original window
<div id="myDiv">Click here</div><script>myDiv.onclick = function(){ //Reduce the browser window width by 100 window.resizeBy(-100,0);}</script>Open the window
window.open() method can navigate to a specific URL or open a new browser window. This method receives 4 parameters: the URL to be loaded, the window target, a feature string, and a boolean indicating whether the new page replaces the currently loaded page in the browser history.
parameter
【1】Often only the first parameter needs to be passed, and the default opening in a new window
<div id="myDiv">Click here</div><script>myDiv.onclick = function(){ window.open("http://baidu.com");}</script>【2】The second parameter indicates the name of the existing window or framework, or the opening method of _self, _parent, _top, _blank, etc.
<div id="myDiv">Click here</div><script>//Open myDiv.onclick = function(){ window.open("http://baidu.com",'_self');}</script>【3】The third parameter is a comma-separated setting string, indicating which features are displayed in the new window
<div id="myDiv">Click here</div><script>myDiv.onclick = function(){ //Open the qq web page with height of 500, width of 500, vertical coordinate of 0, horizontal coordinate of 200 in a new window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")} </script>[4] The fourth parameter is only useful if the second parameter named a window that exists. It is a Boolean value that declares whether the URL specified by the first parameter is to replace the current entry in the window browsing history (true) or should a new entry be created in the window browsing history (false) which is the default setting
Return value
The return value of the open() method is the Window object of the new window
<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 an opener property, which 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. Generally, the open() method is called only when the user manually clicks a button or link. JavaScript code usually fails when trying to open a popup window when the browser is initially loaded. If intercepted, the return value is undefined
<div id="myDiv">Click here</div><script>var w = window.open();console.log(w);//undefined</script>
Window closes
Just like the method open() opens a new window, the method close() closes a window. If the Window object w has been created, 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 object w in the new window also has a closed property to detect whether it is closed.
<div id="myDiv">Click here</div><script>//Show false first, then truemyDiv.onclick = function(){ var w = window.open(); console.log(w.closed);//false setTimeout(function(){ w.close(); console.log(w.closed);//true },1000); }</script>Small application
Object returned by window.open() can operate the opening and closing of a newly opened window
<div id="myDiv">Open window</div><script> var w = null; myDiv.onclick = function(){ //If w does not exist, that is, no new window is 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, it means that the new window is opened}else{ w.close(); w = null; myDiv.innerHTML = 'Open window'; } }</script>Summarize
This article mainly introduces the basic operations of JavaScript browser windows. It is very simple to understand but very practical functions. I hope it will be helpful to everyone's daily use of JavaScript.