如果屏幕大于500,则将脚本入队

时间:2017-04-29 作者:kpmrpar

只有当屏幕分辨率大于500时,我才需要调用javascript。

我发现以下代码。。。

<script type=\'text/javascript\' src=\'<?php echo $urlPlugin?>js/jquery.themepunch.revolution.min.js?rev=<?php echo RevSliderGlobals::SLIDER_REVISION; ?>\'></script>
所以,我修改如下。。。

<script>
if (window.innerWidth > 500) {
    var head = document.getElementsByTagName(\'head\')[0];

    var s1 = document.createElement("script");
    s1.type = "text/javascript";
    s1.src = "http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js";
    head.appendChild(s1);
}
</script>
然而,这并不奏效。

后来我了解了排队功能。我有以下几行。。。

wp_enqueue_script(\'revmin\', RS_PLUGIN_URL .\'public/assets/js/jquery.themepunch.revolution.min.js\', \'tp-tools\', $slver, $ft);
此函数自动调用脚本。那么,我如何使它有条件??

我使用register\\u脚本代替排队脚本,以便以后可以调用该脚本。

这是可行的。然后将javascript代码放在标题中。php

但是,如果屏幕大于500,则无法调用脚本。

也尝试过这个。。。

 <script>
 if( $(window).width() > 500 )
 {
 $.ajax({
 url: \'http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js\',
 dataType: "script",
 success: function() {
    //success
 }
 });
}
</script>

3 个回复
SO网友:David Klhufek

可以使用Window matchMedia()方法https://www.w3schools.com/jsref/met_win_matchmedia.asp 像这样:

 <script type="text/javascript">
        if (matchMedia(\'only screen and (min-width: 500px)\').matches) {

    }
    </script>

SO网友:Mark Kaplun

当您检测到窗口的宽度小于500像素时,您不会在服务器端设置条件,只是不会在客户端初始化/运行它。

尝试在服务器端检测屏幕尺寸是一个很大的禁忌,可能会以各种方式失败(缓存、窗口大小更改,可能还有更多)。

SO网友:mukto90

不能在服务器上设置条件。按照以下步骤操作。

按常规方式将脚本排队。我想你的代码是正确的-wp_enqueue_script(\'revmin\', RS_PLUGIN_URL .\'public/assets/js/jquery.themepunch.revolution.min.js\', \'tp-tools\', $slver, $ft);请参见以下内容以更好地理解:https://developer.wordpress.org/reference/functions/wp_enqueue_script/

在JS中,使用条件 if( $(window).width() > 500 ) { $.ajax({ data: { \'action\' : \'your-action\', \'other_key\' : other_value }, url: ajaxurl, // previously defined. type: \'POST\', success: function(data){ // so something } }) }