WordPress - Enqueue scripts for only if LT IE 9
WordPress - Enqueue scripts for only if LT IE 9
在WordPress主题中,如何有条件地包含ie8及以下版本的脚本?这主要是为各种html5/css3功能应用polyfill。我看到wp有$is_IE变量,它可以用作条件,只包括IE的脚本。有没有办法只为某些版本的IE添加脚本,而不是为所有版本添加脚本?这很简单,有一些HTML ie条件注释,但我想在函数文件的同一位置包含所有脚本。
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后端条件脚本的详细信息。
有什么建议吗?
对于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
过滤器将包含在条件注释中的脚本排入队列。下面是一个示例实现:
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 );
- 无论何时向WP主题或插件添加脚本,都应该使用
wp_register_script()
- 服务器端嗅探通常是个坏主意,因为它不确定
- 通常你想要的目标浏览器缺乏sertain功能,不一定只有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' );
WordPress 4.2及以上版本的解决方案
正确的方法是应用wp_enque_script,因为这里是JavaScripts,而不是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' );
使用从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' );
}
最好的方法是将脚本排入队列,然后使用wp_style_add_data()设置条件。这种方法被官方主题所使用,如2013年
有一个类似的答案,但如果在错误的情况下,他会额外添加。
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' );
由于wordpress是一个PHP脚本,它可以通过$_server 访问服务器变量
然后你可以用PHP搜索检测浏览器,PHP:如果internet explorer 6、7、8或9
尝试使用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' );
更新:由于WordPress>=4.2.0,有一个函数以相同的方式使用。它被称为:
wp_script_add_data()
- 可以't让我的if语句处理js中的html表单输入
- 在<页眉>标签
- 如果 a 为 false,则 if(a) === if(false)
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 如何更改<svg>标记为<img>用js标记
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- 正在尝试使用if和else添加类,但无法正常工作
- 在PHP中使用javascript更改页面标题'if'
- Ajax文件加载和<输入>文件加载
- 使用标记<脚本>在Smarty模板中使用if
- WordPress - Enqueue scripts for only if LT IE 9
- Knockout.js"<!--ko if:-->"导致分离DOM元素的块
- if(x<Infinity)是检查x是否不是NaN并且可以强制为数字的最佳方法
- 防止TinyMCE在标签
- 其中一个更快吗?foo & lt;Bar) if (foo >酒吧)
- 我的脚本运行完美,直到我包装它在这个if(屏幕).宽度& lt;980){}语句检查屏幕大小
- 将类添加到<a>if href以开头http://www.twitter.com/.
- & lt;销售:if>在JSP和Struts 2中使用JavaScript时显示错误
- 获取标记(<span>)的值,以便在if/else条件语句中使用