0

我正在尝试构建一个使用画布的简单环聊应用程序。我遇到的问题是，每当我尝试获取画布的高度和宽度时，我都会得到 0。当我在测试文件 (test.html) 中复制完全相同的代码时，一切似乎都运行良好。这是我的代码，我将所有的 css 和 html 放在一个地方以便于阅读：

<script src="https://hangoutsapi.talkgadget.google.com/hangouts/_/api/hangout.js?v=1.2"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<div id="canvasDiv"></div>
<style>
#canvasDiv {
    width:100%;
    height:100%;
    position:relative;
}
</style>
<script>
$(window).load(function(){
    var canvasDiv = document.getElementById('canvasDiv'); 
    canvas = document.createElement('canvas');
    canvas.style.width='100%';
    canvas.style.height='100%';
    canvasDiv.appendChild(canvas);
    console.log($('#canvasDiv').height());
    canvas.width = $('#canvasDiv').width();
    canvas.height = $('#canvasDiv').height();

在前面的代码中，console.log 在 google hangouts iframe 中打印 0，但在测试文件中打印正确的数字。

4

1 回答 1

1

设置百分比充其量是不确定的。根据我的经验，我更喜欢只使用 JavaScript 函数来获取页面宽度和高度，并将 div 尺寸设置为像素，而不是百分比。

var viewportwidth;
var viewportheight;

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    canvas.style.width=viewportwidth+"px";
    canvas.style.height=viewportheight+"px";
}

该函数将获取浏览器的高度和宽度。将您的<body>标签替换为

<body onload="resize()" onresize="resize()">

并且该函数将在页面加载时调用，并在每次调整页面大小时再次调用（以更新<div>.）的尺寸。通过这种方式，您将获得尺寸的实际像素，而不是百分比。

试试看，如果你有问题，请告诉我。在我的编码历史中，我多次使用过这个脚本，它已成为我的最爱和最常用的脚本之一。

于 2013-01-20T23:29:27.297 回答