回答这个只是为了反驳“不可能”的答案。。。
是的,这可能不是最好的做法,因为我们仍然不确定OP想要实现什么,但这并不意味着它不可能。。。可能很复杂也不切实际,但仍然完全可能。
首先,像往常一样将脚本排队。。。此处设置要加载的最小和/或最大屏幕宽度:
add_action(\'wp_enqueue_scripts\',\'enqueue_screen_size_script\');
function enqueue_screen_size_script() {
global $screensizescripturl, $screenminwidth, $screenmaxwidth;
// set one or the other or both of these
$screenminwidth = \'319\'; $screenmaxwidth = \'769\';
$screensizescripturl = get_stylesheet_directory_uri().\'/screen-size.js\';
wp_enqueue_script(\'screen-size\',$screensizescripturl,array(\'jquery\'));
}
然后可以使用
script_loader_tag
过滤并添加一些神奇的javascript,以有条件地在脚本内部加载脚本:
add_filter(\'script_loader_tag\',\'enqueue_for_screen_size\', 10, 2);
function enqueue_for_screen_size($tag, $handle) {
global $screensizescripturl, $screenminwidth, $screenmaxwidth;
if ($handle == \'screen-size\') {
// this would get the src url dynamically, but using global instead
// $scripturl = substr($tag,(strpos($tag,\'src="\')+5),strlen($tag));
// $scripturl = substr($scripturl,0,strpos($tag,\'"\'));
$conditionaltag = "if (window.jQuery) {x = jQuery(window).width();}
else {x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName(\'body\')[0].clientWidth;} ";
if ( ($screenminwidth) && ($screenmaxwidth) ) {
$conditionaltag .= "if ( (x > ".$screenminwidth.") && (x < ".$screenmaxwidth.") ) {";
}
elseif ($screenminwidth) {$conditionaltag .= "if (x > ".$screenminwidth.") {";}
elseif ($screenmaxwidth) {$conditionaltag .= "if (x < ".$screenmaxwidth.") {";}
$conditionaltag .= " document.write(unescape(\'%3Cscript id=\\"screen-size-script\\" src=\\"".$scripturl."\\"%3E%3C\\/script%3E\')); }</script>";
$tag = str_replace(\'src="\'.$scripturl.\'"\',\'\',$tag);
$tag = str_replace(\'</script>\',$conditionaltag, $tag);
}
return $tag;
}
因此,响应点是响应性的,您可能需要一个窗口调整功能来动态加载脚本,如果它在调整大小后符合您选择的规范。。。以一个良好的措施投入去盎司。
add_action(\'wp_footer\',\'screen_resizer_check\');
function screen_resizer_check() {
global $screensizescripturl, $screenminwidth, $screenmaxwidth;
// note: debounce window resize function from here:
// http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed
echo "<script>jQuery(document).ready(function($) {
function loadscreensizescript() {
x = jQuery(window).width();
";
if ( ($screenminwidth) && ($screenmaxwidth) ) {
echo "if ( (x > ".$screenminwidth.") && (x < ".$screenmaxwidth.") ) {";
}
elseif ($screenminwidth) {echo "if (x > ".$screenminwidth.") {";}
elseif ($screenmaxwidth) {echo "if (x < ".$screenmaxwidth.") {";}
echo "
newscript = document.createElement(\'script\');
newscript.setAttribute(\'id\',\'screen-size-script\');
newscript.src = \'".$screensizescripturl."\';
document.getElementsByTagName(\'head\')[0].appendChild(newscript);
}
}
/* could just script load here instead of using wp_enqueue script */
/* loadscreensizescript(); */
var resizeDebounce = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {uniqueId = "nonuniqueid";}
if (timers[uniqueId]) {clearTimeout (timers[uniqueId]);}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
jQuery(window).resize(function () {
if (document.getElementById(\'screen-size-script\')) {return;}
resizeDebounce(function(){
loadscreensizescript();
}, 1000, "screensizescript");
});
});
}
尽管如此,使用
jQuery(document).ready
首先如上所述,不必担心
wp_enqueue_script
, 但我想这并不能完全回答这个问题。:-)
注意:未从我的其他工作片段中整体测试。。。