有条件加载JavaScript文件
我需要一个JS语句来决定使用哪个JavaScript文件。
我有一个文件：
<script type="text/javascript" src="js/jquery_computer.js"></script> 但是当屏幕宽度小于500像素，我想要加载另一个文件：
<script type="text/javascript" src="js/mobile_version.js"></script>
我已经尝试了一切，它不工作。
你必须在JS中创build自己的标记。 像这样的东西：
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);
也许你可以使用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 10不支持
你可以在jQuery中使用$.getScript
详情请看这里
$(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(); } });
只是使用其他检测条件和脚本元素上使用类可能是它的帮助
您不需要使用jQuery，只需在DOM中dynamic创build<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);
