リサイズ時に画面解像度を見つける

私は数日間このことについて私の頭を掻いてきました。皆さんが助けてくれることを願っています。リサイズ時に画面解像度を見つける

ページが読み込まれるときにブラウザのサイズを調べる必要があります。

私はPHPとjavascriptを使用してPHPページを作成しています。ページには、このコードで始まる：

if (empty($_GET['w'])) { 
    echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <body> 
       <script type="text/javascript"> 
        var winW = 630, winH = 460; 
        if (document.body && document.body.offsetWidth) { 
        winW = document.body.offsetWidth; 
        winH = document.body.offsetHeight; 
        } 
        if (document.compatMode=="CSS1Compat" && 
         document.documentElement && 
         document.documentElement.offsetWidth) { 
        winW = document.documentElement.offsetWidth; 
        winH = document.documentElement.offsetHeight; 
        } 
        if (window.innerWidth && window.innerHeight) { 
        winW = window.innerWidth; 
        winH = window.innerHeight; 
        } 
        location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH); 
       </script> 
      </body> 
      </html>'; 
} else { 
    $w = $_GET['w']; 
    $h = $_GET['h']; 
// my main page goes here 
}

このコードは、基本的に解像度を取得し、PHPはそれらの値を使用できるように、URLのクエリに送られ、幅と高さでページをリロードします。

問題は、ユーザーが自分のウィンドウのサイズを変更してからページを再読み込みすると、送信された値が（URLクエリに残っているため）古い値になります。

ページを読み込んだり再読み込みするたびに新しい幅と高さの値を見つけるにはどうすればよいですか？

おかげ

出典

2012-04-26 marcnyc

あなたは、そのようなJavaScriptコードにPHP_SELFを組み込むことで、XSSに脆弱です。 –

は、私は100％を確認していないが、あなたは、ユーザとの対話によって再読み込み開始からページを停止することはできません。しかし、ページアンロードイベントを聞くことができますので、必要な処理を行うことができます。

出典

2012-04-26 03:29:38 Kamal

jQueryを使用して、GET経由で受け取った値をjsonとして返すスクリプトをポーリングしてみましょう。ユーザーの操作なしに画面のサイズが変更されると、値はどのような値にも更新されます。

私の例では、段落を更新するだけですが、値で何かを行うこともできます。

<?php 
if(isset($_GET['width']) && $_GET['height']){ 
$size = array('width'=>intval($_GET['width']),'height'=>intval($_GET['height'])); 
echo json_encode($size); 
die; 
} 
?> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
function poll(){ 
    setTimeout(function(){ 

     $.ajax({ url: "http://localhost/screensize.php?width="+ $(window).width() +"&height="+ $(window).height() +"",cache: false, 
     success: function(data){ 
     //Do something with returned json 
     $("#screensize").replaceWith("<p id=\"screensize\">Width:"+ data.width +"px Height:"+ data.height +"px</p>"); 
     //Next poll 
     poll(); 
     }, dataType: "json"}); 
    // 1/2 a sec 
    }, 500); 
} 

$(document).ready(function(){ 
    poll(); 
}); 
</script> 

<p id="screensize">Updating...</p>

出典

2012-04-26 03:56:08

あなたのこのコードの問題は、wとhは、URLパラメータとして存在する場合、それは絶対に何もしないということである。（Pもっとやる少ない書きます）。あなたがソースを見ると、それは空白になります。

あなたがする必要があるのは、urlパラメータが現在ウィンドウにある実際の値と一致するかどうかを確認し、次に実行する予定があるかどうかを確認することです。

<?php 

$w = 0; 
$h = 0; 
if (isset($_GET['w'])) { 
    $w = $_GET['w']; 
} 
if (isset($_GET['h'])) { 
    $h = $_GET['h']; 
} 

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <body> 
      <script type="text/javascript"> 
       window.onload = function(event) { 
        var winW = 630, winH = 460; 
        if (document.body && document.body.offsetWidth) { 
        winW = document.body.offsetWidth; 
        winH = document.body.offsetHeight; 
        } 
        if (document.compatMode=="CSS1Compat" && 
         document.documentElement && 
         document.documentElement.offsetWidth) { 
        winW = document.documentElement.offsetWidth; 
        winH = document.documentElement.offsetHeight; 
        } 
        if (window.innerWidth && window.innerHeight) { 
        winW = window.innerWidth; 
        winH = window.innerHeight; 
        } 

        if (winW=='.$w.' && winH=='.$h.') { 
         document.write("Yay, victory!"); 
        } else { 
         location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH); 
        } 
       } 
      </script> 
     </body> 
     </html>'; 
// my main page goes here 

?>

出典

2012-04-26 03:56:33 Sanchit

Jqueryを使用します。このようなものは大体働くはずです。 .resizeハンドラをウィンドウにアタッチします。

$(document).ready(function(){ 
    echoWindowDimensions(); 

    $(window).resize(function(){ 
     echoWindowDimensions(); 
    }); 
}); 

function echoWindowDimensions { 
    var h = $(window).height(); 
    var w = $(window).width(); 
    alert('height'+h+' width'+w); 
}

出典

2012-06-07 14:28:11 CharlieM

リサイズ時に画面解像度を見つける

答えて

関連する問題