是否根据浏览器宽度将脚本入队?

时间:2016-06-11 作者:Gregory Schultz

是否可以通过wp_enqueue_script 基于浏览器的宽度?

谢谢

3 个回复
最合适的回答,由SO网友:majick 整理而成

回答这个只是为了反驳“不可能”的答案。。。

是的,这可能不是最好的做法,因为我们仍然不确定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, 但我想这并不能完全回答这个问题。:-)

注意:未从我的其他工作片段中整体测试。。。

SO网友:Mark Kaplun

不,不是。服务器无法知道浏览器宽度。因为浏览器的宽度可以在任何时候改变,所以我甚至不确定这是一个明智的想法。

SO网友:Andy Macaulay-Brook

正如@马克·卡普兰正确指出的那样,这个明确问题的正确答案是No.

您所能做的,也许询问Stackoverflow会得到更好的答案,就是根据特定的浏览器大小运行脚本,并检测窗口何时调整大小,如果这对您也很重要的话。这并不是没有问题,但这些是JS问题,不是WP问题,所以我在这里不赘述。

如果只下载特定窗口或屏幕大小的脚本对您很重要,那么您可以将脚本加载器加入到混合中。

如果您担心性能,那么这些都是一种平衡,您可能会发现其他类型的优化更有用。