2

我希望我的 PHP 脚本能够访问浏览器窗口的宽度。我一直在阅读此内容，PHP 本身无法访问此信息，但 Javascript/jQuery 可以，然后可以使用 AJAX 将其传递给服务器，因此 PHP 可以获取它。

按照网上的一些解决方案，我编写了以下测试文件，并将其命名为“test.php”

<!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">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>

<?php
if (!isset($_POST["window_width"])) {
?>

<script type="text/javascript">
    var window_width = $(window).width();
    $.ajax({
        type: "POST",
        data: "window_width="+window_width,
    });
</script>   

<?php
}

if(!isset($_POST["window_width"])) {
    echo "not set";
}

?>
</html>

加载 test.php 显示“未设置”，这表明 PHP 没有拾取 window_width 变量。这对我来说似乎很奇怪，因为 Firebug 显示变量在那里（在我的计算机上设置为 1366，因为这是我的浏览器的宽度）。

如何确保设置了 $_POST["window_width"] 以便我可以使用 PHP 访问它？

4

4 回答 4

3

描述

我不明白你的目标是什么，但看起来你忘了等到 DOM 准备好。

样本

$(function() {
   var window_width = $(window).width();
   $.ajax({
       type: "POST",
       data: "window_width="+window_width,
   });
});
于 2012-04-18T15:34:07.457 回答
3

您的服务器端代码不会暂停处理以等待 JavaScript 运行。您在这里处理两个单独的 HTTP 请求。

  1. 浏览器请求 HTML 文档
  2. 由于$_POST['window_width']没有为该请求设置。PHP 返回一个包含该脚本的 HTML 文档。由于仍未为该请求设置，因此它也回显$_POST['window_width']未设置。
  3. 浏览器接收 HTTP 响应并对其进行解析。作为此过程的一部分，它运行 JavaScript。
  4. JavaScript 向...发出 POST 请求，因为您没有包含 URI（一个非常快速的测试表明是当前 URI），所以默认情况下 jQuery 将请求发送到的任何地方。
  5. 为此请求$_POST["window_width"]设置并包含在返回给 JavaScript 的文档中。
  6. 由于 JavaScript 没有success处理程序（或在 HTTP 请求返回时运行的任何其他代码），因此浏览器不会对该文档执行任何操作。

Ajax 是“使用 JavaScript 与网络服务器对话”的一种简写方式。它不会阻止 HTTP 成为无状态的请求-响应协议。

您还没有说明获取窗口宽度的用例（在页面加载后可以更改），因此很难为您遇到的任何问题提出一个好的解决方案。（您似乎问了一个XY 问题）。

想要知道窗口宽度的两个常见原因是：

  • 统计——在这种情况下，您可以只在 PHP 中处理数据，而不必担心将其呈现给客户端
  • 更改布局——通常使用 CSS 媒体查询更好地实现
于 2012-04-18T15:36:07.830 回答
2

我认为在这种情况下您不需要使用 ajax，“外部”（？）页面需要接收数据，而不是“内部”ajax 请求。

<?php session_start(); ?>
<!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">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>

<?php
if (!isset($_POST["window_width"]) && !isset($_SESSION['window_width'])) {
?>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="window_width_form" style="display:none;">
<input name="window_width" id="window_width" value="" />
</form>
<script type="text/javascript">
    $(function(){
        $('#window_width').val($(window).width());
        $('#window_width_form').submit();
    });
</script>   
</body>
<?php
}
elseif (isset($_POST['window_width']) && !isset($_SESSION['window_width']))
{
    $_SESSION['window_width'] = $_POST['window_width'];
    exit(header("Location: {$_SERVER['PHP_SELF']}\r\n"));
}

if(!isset($_POST["window_width"]) && !isset($_SESSION['window_width'])) {
    echo "not set";
}

?>
</html>
于 2012-04-18T15:38:47.160 回答
1

尝试

$.ajax({
        url : "your url goes here"
        type: "POST",
        data: {"window_width":window_width}
    });
于 2012-04-18T15:34:35.960 回答