Is it possible to load scripts through wp_enqueue_script based on a browser's width?
Thanks
Is it possible to load scripts through wp_enqueue_script based on a browser's width?
Thanks
Kinda just answering this to counter the "not-possible" answers...
Yes it is probably not the best thing to do, since we are still unsure what the OP is trying to achieve, but that does not make it not possible... complex and impractical perhaps, but still entirely possible.
First enqueue the script as you normally would... here setting the minimum and/or maximum screen widths to load for as well:
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'));
}
Then you can filter the enqueue using the script_loader_tag filter, and add some magical javascript to conditionally load the script inside itself:
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;
}
So then, the point of responsiveness being responsive, you would probably need a window resize function to dynamically load the script if it fits your chosen specifications after resize... with a debounce thrown in for good measure.
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");
});
});
}
Although, it is arguably a better just to load the script using jQuery(document).ready in the first place as noted above and not bothering with wp_enqueue_script, but I guess that wouldn't fully answer the question. :-)
Note: untested as a whole from otherwise working snippets I have lying around...
wp_enqueue_script() and dump the code in wp_head.
No it isn't. Server can not know browser width. Not sure it is even a smart idea since the width of the browser can change at any point.
As @Mark Kaplan correctly points out, the right answer to this clear question is No.
What you can do, and maybe asking on Stackoverflow will get a better answer, is run scripts in response to certain browser sizes and also detect when the window is resized if that is also important to you. This isn't without its problems, but these are JS issues, not WP issues, so I won't go into that here.
You could put a script loader into the mix if it's important to you that a script is only downloaded for certain window or screen sizes.
If you're worried about performance then these things are a balancing act and you may find other types of optimisations are more helpful.
script_loader_tag filter... making it a question of how is it possible to do this in WP...