发表新帖
发表新帖

How to get height and width after window resize

后端 未结
关注
3 2008
南方客
南方客 2021-01-14 13:10

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

function OpenScormModuleWindow(scormModuleId, scormModu
相关标签:
3条回答
  • 庸人自扰
    2021-01-14 13:24

    This is the best way as far as I can see;

    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;
}
    0 讨论(0)
  • 再見小時候
    2021-01-14 13:38

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

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

    0 讨论(0)
  • 半阙折子戏
    2021-01-14 13:49

    Hope This Example Will Help You...

    HTML Code:

    <!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 Code:

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

    Or You Can Also Use Jquery Code For Resize:

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

});
    0 讨论(0)
 看不清?
提交回复
热议问题