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

WordPress - Enqueue scripts for only if LT IE 9

提问by circlecube

In a WordPress theme, how do you conditionally include scripts for ie8 and below? This is primarily to apply polyfills for various html5/css3 features. I see that wp has the $is_IE variable which can be used as a conditional to only include scripts for IE. Is there a way to add the script for only certain versions of IE though rather than all of them? This is simple with some HTML ie conditional comments, but I'd like to include the scripts all in the same place in my functions file.

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

Conditional for specific versions in HTML:

HTML 中特定版本的条件：

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

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

Conditional for all IE in WP:

WP 中所有 IE 的条件：

    global $is_IE;

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

I've looked around and mainly find details about conditional scripts for wp backend only.

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

Any suggestions?

有什么建议？

采纳答案by Trinh Hoang Nhu

As wordpress is a PHP script, it can access server variable via $_SERVER

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

Then you can search for detect browser with PHP, PHP: If internet explorer 6, 7, 8 , or 9

然后您可以使用 PHP、PHP搜索检测浏览器：如果 Internet Explorer 6、7、8 或 9

回答by Andrew Patton

For WordPress 4.2+

对于 WordPress 4.2+

Use wp_script_add_datato wrap the script in a conditional comment:

使用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' );

Just make sure you register the script before invoking wp_script_add_data(registering is handled by wp_enqueue_scriptabove), and that the first argument you pass to wp_script_add_datamatches the first argument you passed when you registered the script.

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

---

---

For WordPress 4.1

对于 WordPress 4.1

You can use the script_loader_tagfiltertoday to enqueue scripts wrapped in conditional comments. Here's an example implementation:

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

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 );

And if you want to include more than one script in the same way, you can use something like:

如果您想以相同的方式包含多个脚本，您可以使用以下内容：

// 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 );

回答by Mikael Korpela

• You should use wp_register_script()whenever you add scripts to your WP themes or plugins.
• Server side sniffing is generaly bad idea, because it's unsure.
• Usually you want to target browsers lacking sertain features, not necessarily only IE browser. Modernzris good scripts to do just that.

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

For IE, conditional tags work very well. Here's how you can add conditional tags into a script, example is for HTML5shiv:

对于 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' );

回答by Daniel Klose

Solution for WordPress 4.2 and above

WordPress 4.2及以上解决方案

The correct way would be to apply wp_enqueue_script since it JavaScripts here, and not css styles. Also, it is better to use get_bloginfo('stylesheet_url') to make sure this also works in Child Themes.

正确的方法是应用 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' ); 

回答by Masimba Rodgers

Update for WordPress 4.7.3 with scripts loading from CDN:

使用从 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' );
}

回答by Ahmad Awais

The best way to do it is enqueue the scripts and then use wp_style_add_data() to put conditional. This method is being used by official themes like twenty thirteen

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

There is an answer similar to this but he adds extra if in the condition which is wrong.

有一个与此类似的答案，但他在错误的情况下添加了额外的内容。

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' );

回答by Flow

Try to use the wp_style_add_data()function (officially used in twentythirteenand twentyfourteentheme:

尝试使用wp_style_add_data()功能（官方在二十十三和二十四主题中使用：

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

Update:Since WordPress >= 4.2.0 there is a function that is used in the same way. It's called:

更新：自 WordPress >= 4.2.0 以来，有一个功能以相同的方式使用。它被称为：

wp_script_add_data()