html 有条件地加载JavaScript文件

amrnrhlw  于 2022-11-20  发布在  Java
关注(0)|答案(8)|浏览(235)

我需要一个JS语句来确定使用哪个JavaScript文件。
我有一个文件:

<script type="text/javascript" src="js/jquery_computer.js"></script>

但当屏幕宽度小于500px时,我想加载另一个文件:

<script type="text/javascript" src="js/mobile_version.js"></script>

我什么都试过了,都不起作用。

093gszye

093gszye1#

你必须自己在JS中创建这个标记。

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);
fnatzsnv

fnatzsnv2#

如果您希望异步加载脚本,这里的其他答案可以做到这一点。
如果您希望它与页面加载同步加载,这是document.write剩下的非常非常少的有效用例之一:

<script>
(function() { // Scoping function to avoid globals
    var src = /*you want the main version*/ ? "jquery_computer.js" : "mobile_version.js";
    document.write('<script src="js/' + src + '"><\/script>');
})();
</script>

(我删除了type,因为JavaScript是默认的,指定它没有用。)

relj7zay

relj7zay3#

也许您可以使用matchMedia.js并使用jQuery.getScript加载脚本

$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});
ykejflvf

ykejflvf4#

最好使用内置的matchMedia API。

var script = document.createElement('script');
script.type='text/javascript';

if(window.matchMedia("(min-width:500px)").matches) {
  script.src = 'js/jquery.slitslider.js';      
}else{
  script.src = 'js/mobile_version.js';      
}

document.getElementsByTagName('head')[0].appendChild(script);

缺点是IE〈10不支持此功能

eulz3vhy

eulz3vhy5#

您不需要jQuery来实现这一点,在DOM中动态创建<script>标记就足够了:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');

script.type = 'text/javascript';

if (<screen-width less than 500>)
    script.src = "js/mobile_version.js";
else
    script.src = "js/jquery_computer.js";

head.appendChild(script);
h9a6wy2h

h9a6wy2h6#

$(function(){
    var width = $(document).width(),
        mobile = 500;

    if (width > mobile) {
        $('head').append('<script class="desktop" type="text/javascript" src="js/jquery_computer.js"></script>');
        $('head').find('.mobile').remove();
    } 
    else
    {
        $('head').append('<script class="mobile" type="text/javascript" src="js/mobile_version.js"></script>');
        $('head').find('.desktop').remove();
    }
});

只需使用ifelse来检测条件,并在脚本元素上使用class,可能会有所帮助

lymgl2op

lymgl2op7#

如果愿意,可以使用async import()

import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')

在带有<script type="module">的脚本标记中,或者在从常规<script>加载了import()的模块中,您也可以在最新(实验性)浏览器中使用顶级await

<script type="module">
  await import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')      
</script>

但它并不适用于所有脚本。

  • 一个常见的原因是那些UMD模块捆绑器添加了一个闭包

(function(global){...}(this)),因为this在模块中未定义。

  • 第三方脚本需要启用CORS才能加载
  • 在IE中不起作用,但它已经死了
  • 请参阅其他known differences
kmpatx3s

kmpatx3s8#

您可以在jQuery中使用$.getScript
see here以获取详细信息

相关问题