在第一页加载时未读取 Cookie答案

【问题标题】：Cookie not being read on first page load在第一页加载时未读取 Cookie
【发布时间】：2014-01-27 17:49:43
【问题描述】：

我正在尝试发送一个包含设备尺寸的 cookie。如果设备是移动设备/小屏幕，我想阻止加载图像滑块。目的是减少移动设备的 HTTP 请求量。

显示第二个页面加载/刷新滑块，所以我知道代码在某种程度上可以正常工作。

我的问题是；这是实现此类功能的最佳方式吗？是否可以在第一页加载时读取 cookie 并输出滑块？

我已经阅读了一些内容，看来需要刷新页面才能使 cookie 正常工作。对我来说，这似乎弄巧成拙，因为它提高了页面加载速度。可以用会话变量做些什么吗？

这是我的代码：

        document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;

</head>


  $device_width = 0;
  $device_height = 0;

    // Read the device viewport dimensions
    if (isset($_COOKIE['device_dimensions'])) {
      $dimensions = explode('x', $_COOKIE['device_dimensions']);
      if (count($dimensions)==2) {
        $device_width = intval($dimensions[0]);
        $device_height = intval($dimensions[1]);
      }
    }
     if ($device_width > 0) {

    if ($device_width >= 640) {
       require('site/slider.php');
       }    

    else if ($device_width = 0) {
        require('site/slider.php');
      }
      }

还有工作示例：r.adamtoms.co.uk

非常感谢有关如何解决此问题的说明！

亚当

【问题讨论】：

标签： php jquery cookies

【解决方案1】：

如果你想在第一个 php 页面加载时使用 cookie（用 JS 改变值），你必须在你的 php 代码顶部使用 setcookie。然后创建 cookie 并可以在 JS 中更改值并在第一个 php 页面加载中使用。

示例：

<?php
   setcookie('testCookie', 'testValue', 0, "/");
?>

<script type="javascript">
   document.cookie = "testCookie=123456;path=/";
</script>

<?php
   echo $_COOKIE['testCookie'];// return 123456
?>

在此示例中，如果您不在 php 代码顶部使用 setcookie，则在第一页加载中 $_COOKIE['TestCookie'] 返回 null。意味着 php 无法达到在 javascript 中更改的 cookie 的值（在第一页加载中）。这个问题在第二页加载中不存在。

【讨论】：

【解决方案2】：

好的，我决定听从 Xardas 的建议。

这是工作代码：

<style> @media screen and (max-width: 640px) {
.slider-content{display: none;}
}</style>

<div class="slider-content"></div>


$(window).width();   // returns width of browser viewport
var width = $(window).width(); 
if (width >= 642)  {
    $('.slider-content').load("/site/slider.php", function () {
        $('.slider-content').show(200);
    });
}

else {
    jQuery.noop()
}

如果屏幕宽度大于或等于 642（我的第一个媒体查询开始），将加载“slider.php”。

感谢所有帮助的人！

【讨论】：

【解决方案3】：

检查值需要使用==

else if ($device_width == 0) {

你可以考虑js重定向如下

<head>
<script type="text/javascript">
var x = screen.width;
if (x>=640) {
     window.location="http://www.yoursite.com/withslider.htm";
}
else
{
    window.location="http://www.yoursite.com/withoutslider.htm";
    }
</script>
</head>

【讨论】：

它似乎不起作用？可能有错误的代码？您介意编辑您的答案以包含整个脚本吗？抱歉，我对这一切都不熟悉。

【解决方案4】：

Cookie 并不适合您的任务。您的情况的最佳解决方案是：

总是加载滑块，默认隐藏（即使用 display:none; css-属性）；
使用 Javascript 检测屏幕尺寸；
如果尺寸正确，则显示隐藏的滑块；

在第 3 步。如果您不想在默认情况下加载滑块块（即保留网络流量），您可能希望使用 ajax 加载滑块块。

之后，您可以将屏幕尺寸存储到 cookie 或会话中以进一步使用它们。

【讨论】：

非常感谢这个 Xardas，发现 stackoverflow.com/questions/10009040/… 将有一个游戏并报告。干杯！
感谢您的帮助，在此之后，我设法让它按预期工作。您介意解释一下默认隐藏滑块的好处吗？再次干杯，非常有帮助。
再想一想，我说得对吗？显示/隐藏滑块块将允许用户从较大的设备宽度开始，减小到 641px，然后滑块将被隐藏。
您应该选择默认状态（隐藏/显示），因为它最适合您的情况:)
我会选择将用于大多数用户的状态作为默认值。

【解决方案5】：

PHP 在服务器端执行，而 JavaScript 在浏览器中执行，因此代码的 PHP 部分首先执行，然后才运行 JavaScript 代码。

【讨论】：

既然 cookie 包含客户端数据，那将如何工作？
@barmar 是的，很公平，这是个愚蠢的问题。将尝试上述解决方案，将报告回来