禁用浏览器窗口调整大小

问题描述 投票:0回答:4

首先...我没有让用户受到弹出窗口或类似内容的恶意。我只是想阻止用户调整他们已经导航到的网页的浏览器窗口大小(这意味着我无权访问/不想使用 window.open();)。我已经研究这个问题很长一段时间了,但似乎找不到直接的答案。

我觉得我正在走上正轨:

 $(window).resize(function() {
     var wWidth = window.width,
     wHeight = window.height;
     window.resizeBy(wWidth, wHeight);
 });

...无济于事。我必须想象这是可能的。是吗?如果是这样,我绝对会感激您的帮助。

谢谢

javascript jquery browser window-resize
4个回答
27
投票

您可以先确定一个确定的尺寸。

var size = [window.width,window.height];  //public variable

然后这样做:

$(window).resize(function(){
    window.resizeTo(size[0],size[1]);
});

演示:http://jsfiddle.net/DerekL/xeway917/


问:这不会导致调整大小的无限循环吗? - 用户1147171

好问题。这不会导致调整大小的无限循环。 W3C 规范 规定,只有在调整文档视图大小时才必须调度

resize
事件。当
resizeTo
函数尝试第二次执行时,窗口将具有与刚刚设置的完全相同的尺寸,因此浏览器不会触发调整大小事件,因为尺寸尚未更改。


2
投票

我今天需要这样做(对于由 chrome 扩展打开的面板),但我需要允许用户更改窗口高度,但阻止他们更改窗口宽度

@Derek 的解决方案让我几乎实现了目标,但我必须对其进行调整以允许高度变化,因此,可能会出现无限的调整大小循环,因此我也需要防止这种情况发生。这是我对德里克答案的版本,对我来说效果很好:

var couponWindow = {
  width: $(window).width(),
  height: $(window).height(),
  resizing: false
};
var $w=$(window);
$w.resize(function() {
  if ($w.width() != couponWindow.width && !couponWindow.resizing) {
    couponWindow.resizing = true;
    window.resizeTo(couponWindow.width, $w.height());
  }
  couponWindow.resizing = false;
});

0
投票

可以通过preventDefault来完成

document.addEventListener("wheel", (event) =>
{
   if (event.ctrlKey)
      event.preventDefault();
});

它可以针对某些特定元素完成,但保留在其他地方:

document.getElementById("my_element").addEventListener("wheel", (event) =>
{
   if (event.ctrlKey)
      event.preventDefault();
});

0
投票

在努力解决这个问题大约三个小时后,我想出了这个技巧:

let dims = [];
function getDims ()
{
  return [
    window.visualViewport?.width ||
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth,
    window.visualViewport?.height ||
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight
  ];
}

function fixViewport (e)
{
  const newdims = getDims();
  if (newdims[0] != dims[0])
  {
    dims = newdims;
    main.height = dims[1];
    main.style.height = dims[1] + "px";
  }
}
            
window.addEventListener("resize", fixViewport);
            
fixViewport();
body, main
{
  position: fixed;
  width: 100vw;
}

main { overflow-y: auto; }
<head>
  <meta id=viewportMeta name=viewport content="height=device-height, width=device-width, initial-scale=1.0">
</head>
<body>
  <main id=main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at vehicula lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius leo sit amet felis egestas eleifend. Nulla efficitur magna libero, vitae facilisis libero consequat a. Praesent a justo sit amet mi viverra pulvinar. Pellentesque vehicula viverra nisl ut imperdiet. Sed at dignissim dolor. Maecenas sollicitudin purus nibh, non convallis mi mollis quis. Nulla facilisi. Nullam semper nisl nec eros ornare fermentum. Nunc nec tortor in turpis semper iaculis.</p>
  </main>
</body>

一些免责声明:

  1. 此代码还远未准备好投入生产。它需要一些额外的工作才能到达那里。
  2. 此代码仅在 Android AppView、Android 上的 Chrome 和 Android 上的 Brave 上进行了测试。使用前请在您想要的浏览器上测试一下。
© www.soinside.com 2019 - 2024. All rights reserved.