Question

我尝试使用jQuery在HTML页面的onload()方法中获取窗口高度/宽度，但它只是抛出异常。我显然做错了，因为我是HTML5，Javascript和jQuery的初学者。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Testing Javascript Raphael</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="js/libs/raphael/raphael-min.js"></script>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/our_script.js" ></script>
</head>
<body>
    <div id="canvas_container"></div>
</body>
</html>

Javascript our_script.js：

//var paper = new Raphael(10, 50, 320, 200);
//var circle = paper.circle(50, 40, 10);
//circle.attr("fill", "#f00");
//circle.attr("stroke","#fff");

window.onload = function() {  
//var paper = new Raphael(document.getElementById('canvas_container'), $( window ).width(), $( height).height());
var height = $( window ).height(); // ** This call does not work - exception is thrown and height variable remains undefined.
//var paper = new Raphael(document.getElementById('canvas_container'), 500,500);  
//var circle = paper.circle(100, 100, 80);  
//for(var i = 0; i < 5; i+=1) {  
    //var multiplier = i*5;  
    //paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)  
//}  
//var rectangle = paper.rect(200, 200, 250, 100);  
//var ellipse = paper.ellipse(200, 400, 100, 50);  
};

window.onresize = function() {
  var r = $( window ).height();
  var w = $( window ).width();
};

$( window ).load( function() {
  var height = $( window ).height();
  var width = $( window ).width();
});

我是否无法在onload调用中查询窗口对象的高度/宽度？

Answer 1

啊，你已经评论了相关部分。您正尝试在height函数中使用window.load变量，但该范围内不存在该变量，您的第二个window.load事件也未进行评估。

在这里加倍代码是没有意义的。将您的所有window.load代码移到一个函数中。 jQuery不仅限于在自己的事件监听器中使用，就像你在这里所做的那样。

使用jQuery如何获得窗口高度

1 个答案: