10

当用户单击浏览器窗口的“最大化”/“恢复”或“最小化”按钮时，有没有办法用 JavaScript 跟踪这些事件？是否有任何合适的事件或财产可供使用？

我希望当用户单击窗口右上角的“最大化”按钮时，网页应拉伸到特定宽度，并且当浏览器处于可调整大小模式时，网页可调整大小。

请问有人可以帮我吗？我不介意 JavaScript 或 jQuery。

提前致谢。

4

3 回答 3

6

听起来您想要的是在调整浏览器大小时调整大小但仅达到最大宽度的布局。

如果是这种情况，您可以在 CSS 或 JavaScript 中执行此操作。

想象您的内容位于以下元素中：

<div class="container"> -content here- </div>

我的首选选项是使用 CSS，如下所示：

.container{
    max-width: 1200px;
    width: 100%;
}

如果您需要支持 IE6（不支持 max-width），您可以尝试使用 IE6 CSS 中的表达式：

.container{
    width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%" ); /*IE6*/
}

如果你想使用 JavaScript：你可以在窗口的 resize 事件中调整元素的大小：

$(window).bind('resize', function() {
    // resize $('.container').width() based on $(window).width()
});

您最初可以使用触发该逻辑

$(window).trigger('resize');
于 2010-07-30T13:48:54.350 回答
1

据我所知，没有确定的方法来检测浏览器窗口是否被最小化，但是如果您想检测最大化状态，请尝试：

function CheckWindow() {

  var A = screen.availWidth;
  var AA = window.outerWidth;

  var B = screen.availHeight;
  var BB = window.outerHeight;
  
  if (A == AA && B == BB) {
  
    // Window is maximized

  }
   
  else {
   
    // Window is not maximized or in full screen
    
   }

}
<body onresize = "CheckWindow();" onload = "CheckWindow();">

这考虑了浏览器工具栏，适用于我 PC 上的 Chrome 和 Edge。我没有在其他浏览器或移动设备上尝试过。希望能帮助到你。

于 2021-06-09T18:42:49.267 回答
0

如今，在Edge、Chrome和Opera等现代浏览器中相对容易做到这一点。IE 和 Firefox 需要更繁琐的解决方法。FF 也不能显示最小化状态。

随意通过下面的代码段在您的浏览器中检查它。兼容性受限于它对window.outerWidth和window.screenX函数（IE9+、Opera 12、Chrome 1）的支持，早期的浏览器仍然可以处理它，但它需要大量工作，但可用性很小。

在单击按钮 3 秒后，有意在超时的onCheck()函数中执行检查。这使您可以单击按钮，最小化浏览器，然后将其还原以查看结果。这适用于任何缩放级别。请注意，在全屏模式下，它显示正常状态。如果您的设备/操作系统支持分屏（Windows 7+ 等），我们也可以检查它（小红包）。请在您的浏览器中测试它，并在下面留下一些评论。

function onCheck() {
  if (isMaximized()) window.alert('MAXIMIZED');
  else if (isMinimized()) window.alert('MINIMIZED');
  else if (isSplitScreen()) window.alert('SPLIT SCREEN');
  else window.alert('NORMAL');
}

function isMaximized() {
  return (window.screenX === 0) && (window.screenY === 0) &&
  (window.outerWidth === window.screen.availWidth) &&
  (window.outerHeight === window.screen.availHeight);
}

function isMinimized() {
  return (window.screenX < -window.screen.availWidth) &&
  (window.screenY < -window.screen.availHeight);
}

function isSplitScreen() {
  return (window.screenY === 0) &&
  ((window.screenX === 0) || (window.screenX === window.outerWidth)) &&
  (window.outerWidth === window.screen.availWidth / 2) &&
  (window.outerHeight === window.screen.availHeight);
}
<button onclick="window.setTimeout(onCheck,3000)">Check</button>
<p>Click the button and minimize, maximize or split (Win7+) the window.<br>
The result pops up in 3 seconds.</p>

于 2022-02-17T09:46:31.777 回答