调整窗口大小后如何获取高度和宽度 [英] How to get height and width after window resize

问题描述

我有一个scorm模块，该模块会在新窗口中启动，并且在js文件中的window.open中可调整大小= 1.

I have a scorm module which launches in a new window with resizable = 1 in window.open in my js file:

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;
  }

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

I get height and width but is not correct

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

the user can now resize, when the window is the correct size, how can I get the height and width please?

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

I need to get these values so I can save it, next time the window opens it is the correct size.

谢谢

推荐答案

使用一个事件监听器，该监听器在调整大小时进行监听，然后您可以重置值:

Use an event listener which listens on resize, then you can reset your values:

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窗口调整大小事件

If you need a cross browser solution use jQuery ($.on('resize', func)) or see JavaScript window resize event

这篇关于调整窗口大小后如何获取高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！