WordPress - 仅当 LT IE 9 时才将脚本排入队列

Posted 2023-02-18

【中文标题】WordPress - 仅当 LT IE 9 时才将脚本排入队列

【英文标题】：WordPress - Enqueue scripts for only if LT IE 9

【发布时间】：2012-07-18 19:58:52

【问题描述】：

在 WordPress 主题中，如何有条件地包含 ie8 及以下版本的脚本？这主要是为各种 html5/css3 功能应用 polyfill。我看到 wp 有 $is_IE 变量，它可以用作仅包含 IE 脚本的条件。有没有办法只为某些版本的 IE 而不是所有版本添加脚本？这对于一些 HTML 即条件 cmets 来说很简单，但我想将脚本全部包含在我的函数文件中的同一个位置。

HTML 中特定版本的条件：

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

WP 中所有 IE 的条件：

    global $is_IE;

    if ( $is_IE ) 
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    

我环顾四周，主要是找到有关 wp 后端条件脚本的详细信息。

有什么建议吗？

【参考方案1】：

适用于 WordPress 4.2+

使用wp_script_add_data 将脚本包装在条件注释中：

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' );
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' );
wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

只需确保在调用 wp_script_add_data 之前注册脚本（注册由上面的 wp_enqueue_script 处理），并且传递给 wp_script_add_data 的第一个参数与注册脚本时传递的第一个参数匹配。

---

对于 WordPress 4.1

您现在可以使用script_loader_tag filter 将包含在条件 cmets 中的脚本排入队列。这是一个示例实现：

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false );
add_filter( 'script_loader_tag', function( $tag, $handle ) 
    if ( $handle === 'html5shiv' ) 
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    
    return $tag;
, 10, 2 );

如果你想以同样的方式包含多个脚本，你可以使用类似的东西：

// Conditional polyfills
$conditional_scripts = array(
    'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',
    'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',
    'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js'
);
foreach ( $conditional_scripts as $handle => $src ) 
    wp_enqueue_script( $handle, $src, array(), '', false );

add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) 
    if ( array_key_exists( $handle, $conditional_scripts ) ) 
        $tag = "<!--[if lt IE 9]>$tag<![endif]-->";
    
    return $tag;
, 10, 2 );

【讨论】：

我通过谷歌找到了这个答案，因为我面临与 OP 相同的问题。这是一个很好的答案，但即使使用匿名函数的示例也不是很好，因为您没有通过 Wordpress 正确加载脚本。根据您使用的插件，这可能会导致问题，因为您可能会两次加载相同的脚本，因此请始终关注 Wordpress 实际打印的 HTML。

我认为这还可以，但实际上并不比在 header.php 文件中硬编码更好，imo。

看起来这将成为 4.2 的一部分！ core.trac.wordpress.org/ticket/16024

这是在 4.2 中添加的吗？

@ClarusDignus 我添加了一个使用条件 cmets 加载脚本的 WP 4.2+ 版本的示例。这是否清楚，还是您仍有疑问？

【参考方案2】：

每当您将脚本添加到您的 WP 主题或插件时，您都应该使用 wp_register_script()。 服务器端嗅探通常是个坏主意，因为它不确定。 通常您希望针对缺乏某些功能的浏览器，不一定只有 IE 浏览器。 Modernzr 是很好的脚本。

对于 IE，条件标签效果很好。以下是如何在脚本中添加条件标签，例如HTML5shiv：

global $wp_scripts;
wp_register_script( 
    'html5shiv', 
    get_bloginfo('template_url').'/assets/js/html5shiv.js', 
    array(), 
    '3.6.2'
    );
$wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );

【讨论】：

这仅适用于$wp_styles。相关票证：#16024.

是的，但这不起作用。检查源输出。脚本周围没有条件注释。

对 Mikael 感到抱歉，但这确实需要被否决，所以人们认为这不是一个可行的解决方案。

Aannnnddd... 这终于可以在 WP 4.2 中使用了！ core.trac.wordpress.org/ticket/16024

【参考方案3】：

WordPress 4.2 及以上版本的解决方案

正确的方法是应用 wp_enqueue_script，因为它在这里是 javascript，而不是 css 样式。此外，最好使用 get_bloginfo('stylesheet_url') 来确保这也适用于子主题。

/**
 * IE Fallbacks
 */

function load_IE_fallback() 
    wp_register_script( 'ie_html5shiv', get_bloginfo('stylesheet_url'). '/js/html5shiv.min.js', __FILE__, false, '3.7.2' );
    wp_enqueue_script( 'ie_html5shiv');
    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_script( 'ie_respond', get_bloginfo('stylesheet_url'). '/js/respond.min.js', __FILE__, false, '1.4.2' );
    wp_enqueue_script( 'ie_respond');
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

add_action( 'wp_enqueue_scripts', 'load_IE_fallback' ); 

【讨论】：

我正要自己添加完全相同的东西，但我看到你已经完成了。我已经对此进行了测试，它适用于我的主题 functions.php 中的 get_template_directory_uri().'/js/lib/excanvas.js'

感谢您提供此答案。没有什么比提问者找到答案但懒得为其他人分解更让我恼火的了。

【参考方案4】：

从 CDN 加载脚本的 WordPress 4.7.3 更新：

    add_action( 'wp_enqueue_scripts', 'load_IE_fallback' );
function load_IE_fallback() 
    wp_register_script( 'ie_html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js', '', '3.7.3', false );
    wp_register_script( 'ie_respond', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '1.4.2', false );

    wp_enqueue_script( 'ie_html5shiv');
    wp_enqueue_script( 'ie_respond');

    wp_script_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );    
    wp_script_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

【参考方案5】：

最好的方法是将脚本排入队列，然后使用 wp_style_add_data() 放置条件。这种方法正在被twenty thirteen等官方主题使用

有一个与此类似的答案，但如果条件错误，他会添加额外内容。

wp_register_style( 'ie_html5shiv', get_template_directory_uri() . '/js/html5shiv.js' );
    wp_enqueue_style( 'ie_html5shiv');
    wp_style_add_data( 'ie_html5shiv', 'conditional', 'lt IE 9' );

    wp_register_style( 'ie_respond', get_template_directory_uri() . '/js/respond.min.js' );
    wp_enqueue_style( 'ie_respond');
    wp_style_add_data( 'ie_respond', 'conditional', 'lt IE 9' );

【讨论】：

好收获。您可以针对如此小的更改提出更改或评论类似的答案。

【参考方案6】：

由于wordpress是一个PHP脚本，它可以通过$_SERVER访问服务器变量

然后就可以用PHP搜索检测浏览器了，PHP: If internet explorer 6, 7, 8 , or 9

【讨论】：

答案不完整。这没有解决如何使用 wp_enqueue_script 实际在脚本周围注入条件，这是将 javascript 添加到主题的规定方式。

【参考方案7】：

尝试使用wp_style_add_data()函数（官方在twentythirteen和twentyfourteen主题中使用：

wp_enqueue_style( 'iepolyfill', bloginfo( 'stylesheet_directory' ) . '/js/iepolyfill.min.js' );
wp_style_add_data( 'iepolyfill', 'conditional', 'if lt IE 9' );

更新： 由于 WordPress >= 4.2.0 有一个函数以相同的方式使用。它被称为：

wp_script_add_data()

【讨论】：

您是否确认使用wp_style 逻辑添加JavaScript 不会产生意外或负面后果？是否将文件添加为<script> 元素而不是<link> 元素？

此代码生成 HTML 以包含 CSS 文件，而不是 Javascript。