在调整大小时发现屏幕分辨率

问题描述：

我一直在为此挠挠我的头几天，希望你们可以帮忙。在调整大小时发现屏幕分辨率

我需要找出加载页面时浏览器的大小。

我正在写一个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 
}

此代码基本上得到解决，然后用宽度和高度在URL查询发送，使得PHP可以然后使用这些值重新加载页面。

问题是：当用户调整其窗口然后重新加载页面时，发送的值是旧值（因为它们仍在URL查询中）。

如何在每次加载或重新加载页面时查找宽度和高度的新值？

感谢

通过将PHP_SELF嵌入到您的JavaScript代码中，您很容易受到XSS的攻击。 – 2012-04-26 03:30:12

答

我不是100％肯定，但你不能从开始通过用户交互重新加载页面停止。但你可以听取页面卸载事件，以便你可以做你需要做的事情。

答

如何使用jQuery，通过轮询脚本来返回通过GET接收到的值作为json。它将更新为任何值，因为屏幕大小无需用户交互！

在我的例子中，它只是更新段落，但你也可以用值来做些事情。（写少花钱多办事; P）

<?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>

答

与你的这段代码的问题是，它绝对没有，如果W和H作为URL参数存在。如果你看到源代码，它将是空白的。

你应该做的是检查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 

?>

答

使用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); 
}

在调整大小时发现屏幕分辨率

相关推荐