Javascript 调整窗口大小后如何获取高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12596299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get height and width after window resize
提问by charlie_cat
I have a scorm module which launches in a new window with resizable = 1 in window.open in my js file:
我有一个 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();
}
in my view I have:
在我看来，我有：
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.
我需要获取这些值以便我可以保存它，下次打开窗口时它是正确的大小。
thanks
谢谢
回答by dan-lee
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
如果您需要跨浏览器解决方案，请使用jQuery( $.on('resize', func)) 或查看JavaScript 窗口调整大小事件
回答by Samir Lakhani
Hope This Example Will Help You...
希望这个例子能帮助你...
HTML Code:
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 Code:
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>";
}
Or You Can Also Use Jquery Code For Resize:
或者你也可以使用 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);
});
回答by Levent Divilioglu
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;
}
