javascript — Kolejkuj skrypty na podstawie szerokości przeglądarki?
Trochę po prostu odpowiadając na to, aby przeciwdziałać odpowiedziom „niemożliwym” …
Tak, prawdopodobnie nie jest to najlepsza rzecz do zrobienia, ponieważ wciąż nie jesteśmy pewni, co PO próbuje osiągnąć, ale to nie czyni tego niemożliwym… być może złożonym i niepraktycznym, ale nadal całkowicie możliwym.
Najpierw umieść skrypt w kolejce, tak jak zwykle… tutaj ustawiając również minimalną i/lub maksymalną szerokość ekranu do załadowania:
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'));
}
Następnie możesz filtrować kolejkę za pomocą script_loader_tag
filter i dodaj magiczny skrypt javascript, aby warunkowo załadować skrypt do siebie:
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;
}
Tak więc, ponieważ responsywność jest responsywna, prawdopodobnie potrzebowałbyś funkcji zmiany rozmiaru okna, aby dynamicznie ładować skrypt, jeśli pasuje on do wybranych specyfikacji po zmianie rozmiaru …
add_action('wp_footer','screen_resizer_check');
function screen_resizer_check() {
global $screensizescripturl, $screenminwidth, $screenmaxwidth;
// note: debounce window resize function from here:
//
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");
});
});
}
Chociaż prawdopodobnie lepiej jest po prostu załadować skrypt za pomocą jQuery(document).ready
w pierwszej kolejności, jak wspomniano powyżej i nie zawracać sobie głowy wp_enqueue_script
, ale myślę, że to nie do końca odpowiada na pytanie. 🙂
Uwaga: nietestowane jako całość z innych działających fragmentów, które leżą wokół …