WordPress

javascript — Kolejkuj skrypty na podstawie szerokości przeglądarki?

  • 11 czerwca, 2016
  • 3 min read
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. 🙂

Warto przeczytać!  wtyczki - Wordpress: dostosuj podpis wewnątrz slajdu Fancybox za pomocą elementów HTML

Uwaga: nietestowane jako całość z innych działających fragmentów, które leżą wokół …


Źródło