Question

我正在尝试构建一个使用画布的简单环聊应用。我遇到的问题是，每当我尝试获得画布的高度和宽度时，我得到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环聊iframe中打印0，但在测试文件中输出正确的数字。

Answer 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>的尺寸。）这样，您将获得尺寸的实际像素，而不是百分比。

尝试一下，如果您遇到问题请告诉我。我在编码历史中多次使用过这个剧本，它已成为我最喜欢和最常用的剧本之一。

环聊中的高度和宽度返回零

1 个答案: