使用现代化程序检测功能支持，并根据结果使用PHP进行处理

Question

所以我需要使用modernizer来检测webp支持，然后根据结果的结果在PHP中进行一些处理。

现在起初我以为我可以设置一个cookie并使用PHP获取cookie，如下所示：

JS：

Modernizr.on('webp', function (result) {
  if (result) {
    setCookie("webpissupported", "yes", "365");
  }
});

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

PHP：

$userAvatar = um_get_avatar_uri( um_profile('profile_photo'), 190 );
$patterns = array("/.jpg/", "/.jpeg/", "/.png/");
if (isset($_COOKIE['webpsupport']))
    $userAvatar = preg_replace($patterns, "_result.webp", $userAvatar);

现在上面代码的问题是我正在使用wordpress插件w3总缓存，并启用了页面缓存。这导致cookie被缓存并产生意外结果。

那么我想也许我可以这样做：

<script type="text/javascript">
    Modernizr.on("webp", function (result) {
      if (result) {
        <?php $webpSupport = true; ?>
      }
    });
</script>

但这不起作用。

任何人都知道如何解决这个问题。

Answer 1

您与服务器端（PHP）混合（客户端）浏览器端处理。在您的示例中，无论稍后由浏览器/ JS处理什么（或者在没有JS浏览器的情况下根本不处理），都将执行PHP代码块。因此，在这种情况下，$webpSupport变量和示例将按从上到下的顺序分配给它。

实现目标的一种方法是设置JS cookie，setCookie("webpissupported", "yes", "365");，并在下一页视图中读取$_COOKIE['webpissupported']并根据它提供图像。

请记住，根据caniuse.com / StatCounter，webp不是标准，但在72.85％的浏览器中存在。您必须将其用作渐进增强。