javascript - 单击浏览器中的最大化或最小化按钮时启用调整图标大小

Question

我编写了这段代码以在调整浏览器大小时调整图标大小。单击最大化按钮或最小化按钮时，代码不起作用。

单击浏览器中的最大化和最小化按钮以调整 switch_ico 图标大小时，如何启用调用我的 displayWindowSize 函数？

<script>
    //window.onresize = displayWindowSize;
    //window.onload = displayWindowSize;

    $(window).resize(function()
     {   
      setTimeout(function() {
          displayWindowSize();
      }, 100);
    });

    function displayWindowSize() {
      var tpReportWidth = $("#tpReport").width();
      var iconWidth = $("#switch_icon").width();
      var newIconWidth = Math.round(tpReportWidth/49.6).toFixed(2)
      console.log('tpReportWidth: ' + tpReportWidth + " ,iconWidth: " + iconWidth + 'newIconWidth: ' + newIconWidth);
      $("#switch_icon").attr('height',newIconWidth);
      $("#switch_icon").attr('width',newIconWidth);
    };
</script>

Answer 1

调整大小事件确实会在 chrome/firefox 中触发。
调整大小、最大化、取消最大化事件将触发调整大小事件。
最小化(完全隐藏浏览器的最小化)将触发可见性更改事件。

您确定问题不是由其他原因引起的吗？
下面的代码将在每次触发调整大小/可见性更改时增加一个计数器。

请注意，由于代码段是在 iframe 中运行的，因此您必须将代码段展开到整页才能看到事件

//window.onresize = displayWindowSize;
//window.onload = displayWindowSize;

$(window).resize(function() {
  setTimeout(function() {
    displayWindowSize();
  }, 100);
});

var resizeCount=0;
function displayWindowSize(){
  $('.resize-count').text("resizes:" + ++resizeCount);

};


document.addEventListener("visibilitychange", function() {
  displayMinimize()
}, false);
var minimizeCount=0;
function displayMinimize(){
  $('.visibility-count').text("visibility:" + ++minimizeCount);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="resize-count">
resizes: none
</div>


<div class="visibility-count">
visibility: none
</div>