窗口大小调整后如何获得高度和宽度

Question

我有一个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;
  }

我得到身高和宽度,但不正确

用户现在可以调整大小,当窗口尺寸正确时,我该如何获得高度和宽度？

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

谢谢

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