不依赖 JavaScript 的 Bootstrap CDN 的 WordPress 后备？

Posted 2023-03-06

【中文标题】不依赖 JavaScript 的 Bootstrap CDN 的 WordPress 后备？

【英文标题】：WordPress fallback for Bootstrap's CDN without relying on JavaScript?

【发布时间】：2019-06-11 17:36:27

【问题描述】：

使用 Bootstrap 4 为 WordPress 开发主题我熟悉建议的编写 <div> 的方法：

<div id="bootstrapCssTest" class="hidden"></div>

并用 javascript 检查它：

<script type="text/javascript">
    if ($('#bootstrapCssTest').is(':visible') === true) 
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    
</script>

reference: "How to load local copy of bootstrap css when the cdn server is down?" 但我想要一种在没有 JavaScript 的情况下测试 CSS 并根据是否找到 CDN 将 Bootstrap 的 CSS 排入队列的方法。经过研究，我读到fopen 可能并不总是在服务器级别上被允许，所以我选择了get_headers，代码：

function bootstrap_css() 
    $bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
    $cdn_check       =  @get_headers($bootstrap_cdn);

    if ($cdn_check[0] === "HTTP/1.1 200 OK") :
        wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

        function add_cross_origin($html,$handle) 
            if ('bootstrap' === $handle) 
                return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
            
                return $html;
            
        add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;

add_action('wp_enqueue_scripts','bootstrap_css');

是否有更好的方法来检查不使用 JavaScript 进行测试的 Bootstrap CSS CDN 是否可用？我应该检查“HTTP/1.1 200 OK”之外的任何内容吗？ cURL 会比 get_headers 更好用吗？

【问题讨论】：

注意状态“304 - 找到”这就是 cdn 的工作方式

@johnSmith 为什么不写一个答案来解释你指的是什么？我会赞成，我认为其他人也会赞成

好吧，因为它是一个评论，我将添加另一个评论：如果您的服务器成功测试了 cdn，这并不意味着当客户端请求时它也可用于客户端，这就是为什么客户端-side check 对我来说更有意义。如果您不想依赖 cdn，您可以随时使用本地副本

如果您想在客户端执行此操作，那么在 Service Worker 上执行此操作会感觉更好。但我不确定在服务器上做这件事。仅仅因为服务器收到成功消息，并不意味着客户端可以下载它（尽管这种情况非常罕见）。

那么我应该如何设置条件呢？

【参考方案1】：

php 脚本第一次尝试访问 CSS 文件后，服​​务器返回状态码 304。最简单的检查实现如下：

function bootstrap_css() 
$bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
$cdn_check       =  @get_headers($bootstrap_cdn);

if (strpos($cdn_check[0], "200") !== false || strpos($cdn_check[0], "304") !== false) :
    wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

function add_cross_origin($html,$handle) 
    if ('bootstrap' === $handle) 
        return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
    
        return $html;
    
add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;

add_action('wp_enqueue_scripts','bootstrap_css');