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

Question

只是一个关于正确语法的奇怪问题。我只想在浏览器屏幕 < 1100px 时加载 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，但这是你的决定:)