檢測功能支持與modernizer和PHP的基礎上結果

所以我需要檢測使用modernizer的webp支持，然後根據結果的結果在PHP中做一些處理。檢測功能支持與modernizer和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>

但是，這是行不通的。

任何人都知道我可以解決這個問題。

來源

2017-09-06 Web Dev Guy

問題是他們的順序錯誤。 PHP首先運行，創建頁面，將其發送到瀏覽器，然後Modernizer運行。做到這一點的唯一方法是讓PHP發送運行Modernizer的頁面，然後將頁面作爲表單提交回去。 – Barmar

@Barmar嗨，你有一個粗略的例子來說明如何做到這一點。謝謝您的幫助：） –

你已經混合（客戶端）瀏覽器端處理與服務器端（PHP）。在你的例子中，無論使用瀏覽器/ JS處理後面的（或者根本沒有，如果沒有JS瀏覽器），PHP代碼塊都將被執行。因此，$webpSupport變量在這種情況下，例子應該是你自上而下分配給它的東西。

實現你所追求的一種方法是設置JS cookie，setCookie("webpissupported", "yes", "365");，並在下一頁視圖中閱讀$_COOKIE['webpissupported']並根據它提供圖像。

請記住，webp不是一個標準，儘管根據caniuse.com/StatCounter在72.85％的瀏覽器中存在。你必須將其用作漸進式增強。

來源

2017-12-27 12:24:22

檢測功能支持與modernizer和PHP的基礎上結果

回答

相關問題