0

キャンバスを使用するシンプルなハングアウトアプリを作成しようとしています。私が抱えている問題は、キャンバスの高さと幅を取得しようとすると0になることです。まったく同じコードをテストファイル（test.html）にコピーすると、すべてが正常に機能しているように見えます。これは私のコードです。読みやすくするために、すべてのcssとhtmlを1か所にまとめました。

<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>）。このようにして、パーセンテージではなく、寸法の実際のピクセルが得られます。

試してみて、問題があれば教えてください。私はコーディングの歴史の中でこのスクリプトを何度も使用してきましたが、これは私のお気に入りの1つになり、最もよく使用されています。

于 2013-01-20T23:29:27.297 に答える