1. 首页
  2. css

CSS客户端数据服务器端的单页刷新

更新:我有一篇较新的文章\”服务器端芥末切\”,它涵盖了相同的领域,并解决了许多怪癖。这可能是一本更好的读物。

我们最近讨论了如何获取客户端信息并使其在服务器端可用。在客户机上做真实的测试,比如测量浏览器窗口宽度和做特性测试。然后将数据保存到Cookie中。下一次加载页面时,您将在cookie中拥有这些数据。

我非常喜欢这种技术,并使用它,但是如果您真的想在用户看到的第一页上使用这些信息呢?您可能需要进行页面刷新,但必须确保安全。

您可能只想测试cookie是否已设置,如果未设置,请设置并重新加载。这里使用的PHP和jQuery只是为了演示,但是你可以(我也可以)用任何不同的后端语言,在有或没有前端库的情况下这样做。

<?php if (isset($_COOKIE[\"_clientInfo\"])) { ?><script>// Do tests, set cookielocation.reload(true); // true means don\"t use cache</script><?php } else { ?><!-- Proceed normally, using cookie data to make more choices --><?php } ?>

这是非常危险的。因为:

  1. 用户可能故意不允许cookies。
  2. 用户可能正在使用不允许cookies的浏览器。
    1. 据我所知,包含WebView的iOS应用程序需要特别启用接受cookie的功能,这意味着默认情况下不允许使用cookie。

      如果以上两种情况中的任何一种都是真的,您将进入无限重新加载状态,这是非常糟糕的。

      这里的诀窍是这样做的:

      1. 测试cookie是否存在服务器端。
      2. 如果未设置cookie,请在客户端使用所需的数据进行设置。
      3. 然后,如果浏览器是否支持cookie,请在客户端执行另一个测试。
      4. 如果浏览器确实支持cookie,但您尚未使用它(cookieUsed),然后刷新。

      这里有一个完整的文档,展示了它是如何运行的:

      <!DOCTYPE html><html = = JSON.parse(\"<?php echo $_COOKIE[\"_clientInfo\"]; = {browserWidth: $(window).width(),browserHeight: $(window).height(),flexboxSupport: Modernizr.flexbox,SVGSupport: Modernizr.svg};var = navigator.cookieEnabled ? true : false;if (cookiesEnabled) {location.reload(true);}</script><p>Make sure you serve useful content here as well.</p><?php } ?></body></html>

      这里有一个实时演示。

      为了满足您的需要,您可能需要对该结构进行一些修改。重要的一点是,无论结果如何,都要提供有用的内容。最糟糕的情况是,您一直试图设置一个cookie,而在没有cookie的环境中,这些用户永远无法设置该cookie。您可以决定这是如何被接受的。

      您可以使用探测器之类的工具进行更健壮的测试。

      我们在CodePen上使用了此工具(截至2014年12月的更新),并对其进行了改进。

      CSS客户端数据服务器端的单页刷新 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%ae%a2%e6%88%b7%e7%ab%af%e6%95%b0%e6%8d%ae%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%ab%af%e7%9a%84%e5%8d%95%e9%a1%b5%e5%88%b7%e6%96%b0/

发表评论

您的电子邮箱地址不会被公开。