2012-04-26 5 views
0

Я уже несколько дней царапаю голову об этом, надеюсь, вы, ребята, можете помочь.определение разрешения экрана при изменении размера

Мне нужно узнать размер браузера при загрузке страницы.

Я пишу PHP-страницу с PHP и javascript. Страница начинается с этим кодом:

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).

Как я могу найти новые значения ширины и высоты каждый раз, когда страница загружается или перезагружается?

Благодаря

+2

Вы уязвимы перед XSS, вставив PHP_SELF в свой код javascript, подобный этому. –

ответ

0

Я не уверен на 100%, но вы не можете остановить страницы от начать перезагружать взаимодействия с пользователем. Но вы можете слушать события выгрузки страницы, чтобы вы могли делать то, что вам нужно.

0

Как насчет использования 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> 
0

Проблема с этим кодом ваша в том, что он не делает абсолютно ничего, если б и ч существовать в качестве параметров 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 

?> 
0

Использование 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); 
} 
Смежные вопросы