调整窗口大小后如何获取高度和宽度答案

【问题标题】：How to get height and width after window resize调整窗口大小后如何获取高度和宽度
【发布时间】：2020-01-31 16:44:02
【问题描述】：

我有一个 scorm 模块，它在我的 js 文件中的 window.open 中 resizable = 1 的新窗口中启动：

function OpenScormModuleWindow(scormModuleId, scormModuleUrl, title, width, height) 
{
  _scormModuleId = scormModuleId;
  InitializeUserScormModule();
  scormModuleWindow = window.open(scormModuleUrl, "title", "width=" + width + ", height=" + height + ", resizable = 1");
  scormModuleWindow.focus();
}

在我看来，我有：

  var myWidth = 0, myHeight = 0;
  if (typeof (window.innerWidth) == 'number')
  {
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
  }
  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
  {
      myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
  }
  else if (document.body && (document.body.clientWidth || document.body.clientHeight))
  {
      myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
  }

我得到了高度和宽度但不正确

用户现在可以调整大小，当窗口大小正确时，请问如何获得高度和宽度？

我需要获取这些值以便保存它，下次打开窗口时它的大小是正确的。

谢谢

【问题讨论】：

标签： javascript asp.net-mvc-3

【解决方案1】：

使用监听调整大小的事件监听器，然后你可以重置你的值：

window.addEventListener('resize', setWindowSize);

function setWindowSize() {
  if (typeof (window.innerWidth) == 'number') {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else {
    if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
    } else {
      if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
      }
    }
  }
}

如果您需要跨浏览器解决方案，请使用jQuery ($.on('resize', func)) 或查看JavaScript window resize event

【讨论】：

是否需要调用匿名函数才能调用setWindowSize？你能不能不写“window.addEventListener('resize', setWindowSize);” ?

【解决方案2】：

希望这个例子对你有所帮助...

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Window Size : height and width</title>
</head>
<!-- Resize the window (here output panel) and see the result !-->
<body onload="getSize()" onresize="getSize()">
<div id="wh"> 
<!-- Place height and width size here! --> 
</div>
<body>
</body>
</html>

JavaScript 代码：

function getSize()
{
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;

// put the result into a h1 tag
 document.getElementById('wh').innerHTML = "<h1>Width: " + w + " Height: " + h + "</h1>";
}

或者你也可以使用 Jquery 代码来调整大小：

var height = $(window).height();
var width = $(window).width();

$(window).resize(function() {

var height = $(window).height();
var width = $(window).width();
console.log("height"+height);
console.log("width"+width);

});

【讨论】：

【解决方案3】：

据我所知，这是最好的方法；

function resizeCanvas() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    WIDTH = canvas.width;
    HEIGHT = canvas.height;
}

【讨论】：