我需要一个 JS 语句来确定使用哪个 JavaScript 文件。
我有一个文件：
<script type="text/javascript" src="js/jquery_computer.js"></script>
但是当屏幕宽度小于 500px 时，我想加载另一个文件：
<script type="text/javascript" src="js/mobile_version.js"></script>
我什么都试过了，还是不行。
【问题讨论】：
标签： javascript html
您必须自己在 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);
【讨论】：
如果您希望 异步 加载脚本，这里的其他答案就是这样做的。
如果您希望它与页面加载同步加载，这是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 是默认设置，指定它没有用。）
【讨论】：
if (typeof Promise === 'function') {/*load a script */} 用例。
也许您可以使用matchMedia.js 并可以使用jQuery.getScript 加载脚本
$(function(){
if (matchMedia('only screen and (max-width: 500px)').matches) {
$.getScript(...);
}
});
【讨论】：
最好使用内置的 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不支持
【讨论】：
你不需要 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);
【讨论】：
$(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();
}
});
仅使用 if else 来检测条件并在脚本元素上使用类 可能有帮助
【讨论】：
<script class="mobile" .... /> 而不是<script class="mobile" ....></script> 否则你会得到unterminated string error
如果你愿意，可以使用异步 import()。
import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')
在带有<script type="module"> 的脚本标记中或在从常规<script> 加载的带有import() 的模块中，您也可以在最新（实验性）浏览器中使用顶级等待
<script type="module">
await import(condition ? 'js/desktop_version.js' : 'js/mobile_version.js')
</script>
但它不适用于每个脚本。
(function(global){...}(this)) 因为 this 在模块中未定义。【讨论】：
你可以在 jQuery 中使用$.getScript
see here 了解详情
【讨论】：