window.onresize event notes

How onresize is defined

1. Define directly in html

如<body onresize="doResize()"/>

2. Assign value directly to onresize

You can assign values to the onresize of window and body

如window.onresize=function(){},document.body.onresize=function(){}

3. Use event monitoring

only works on windows

如window.addEventListener("resize",fn);

illustrate:

1. Directly assigning a value to onresize will overwrite the definition in html.

2. Assign value directly to onresize, only one of window and body works, and the later definition will overwrite the first one.

3. Event monitoring is only valid for windows, and can be triggered at the same time in other ways.

1. Browser size change response events:

window.onresize = function(){....}

Get the changed parameters:

// Get the changed page width  
var currentWidth = document.body.clientWidth;

It should be noted here that in the onresize response event processing, because the page has been refreshed, the obtained page size parameter is the changed parameter.

If you need to use the parameters before the change, you need to create a global variable to save the previous parameter (and remember to refresh the global variable in the onresize event to save the new parameter value).

2. The window.onresize event in Google Chrome will be executed twice by default (occasionally, it will only be executed once, most of the Internet says that this is a Chrome bug).

Solution: (set a delay for resize) Generally speaking, it is recommended to create a new flag to delay reset control to prevent it from executing itself a second time. The code is as follows:

var firstOnResizeFire = true;//Google Chrome onresize event will be executed 2 times, add a flag here to control  
  
window.onresize = function()  
{  
 if (firstOnResizeFire) {  
  NfLayout.tabScrollerMenuAdjust(homePageWidth);  
  firstOnResizeFire = false;  
    
  //Reset the flag after 0.5 seconds (Chrome's window.onresize is executed twice by default)  
  setTimeout(function() {  
   firstOnResizeFire = true;  
        }, 500);  
 }  
   
 homePageWidth = document.body.clientWidth; //Resave the new width  
}

example:

Listen for screen changes:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta content="telephone=no" name="format-detection">
</head>
<body>
<label id="show"></label>
<script>
    window.onresize = adjuest;
    adjuest();
    function adjuest(){
       var label = document.getElementById("show");
       label.innerHTML = "width = "+window.innerWidth+";height="+window.innerHeight;
    }
</script>
</body>
</html>

效果：
这里写图片描述

2 .监听div大小的改变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="show_div" style="background-color: lightblue;width: 100%;height: 300px;"></div>
<label id="show"></label>
<script>
    window.onresize = adjuest;
    adjuest();
    function adjuest(){
        var label = document.getElementById("show");
        var divCon = document.getElementById("show_div");
        label.innerHTML = "width = "+divCon.offsetWidth+";height="+divCon.offsetHeight;
    }
</script>
</body>
</html>

效果：
这里写图片描述

window.onresize event notes

Guess you like