javascript - 根据浏览器大小加载文件

Question

只是一个关于正确语法的问题。只有当浏览器屏幕小于 1100 像素时，我才想加载 jquery 文件。

<script type="text/javascript">
$(document).ready(function() {
  if ($(window).width() < 1100) {

    //load file

     }
  });
</script>

我想加载 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js 但找不到语法。

谢谢！

Answer 1

我假设您在尝试获取窗口宽度时没有 jQuery，所以像这样：

<script>
    var width = window.innerWidth || document.documentElement.clientWidth;
    if ( width < 1100 ) {
        var s = document.createElement('script'),
            p = document.getElementsByTagName('script')[0];
        s.async = true;
        s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';
        p.parentNode.insertBefore(s, p);
    }
</script>

如果你有 jQuery，它的语法会更简单一些：

<script>
if ( $(window).width() < 1100 ) {
    $('<scr'+'ipt>').attr({
        src: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
        async: true
    }).insertBefore($('script:first'));
}
</script>

我认为您不会通过加载另一个较低版本来“卸载”一个 jQuery 版本，但这是您的决定：)

Answer 2

$(document).ready(function() {
    if ($(window).width() < 1100) {
       var newscript = document.createElement('script');
           newscript.type = 'text/javascript';
           newscript.async = true;
           newscript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';
       (document.getElementsByTagName('head')[0]
        || document.getElementsByTagName('body')[0]).appendChild(newscript);
    }
});