Question

我有一个脚本myscript.js，该脚本仅在窗口宽度为960px或更大时才处于活动状态。

我包括了jQuery，如下所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

以下是我在所需条件下加载脚本的尝试。

if ($(window).width() < 960) {
    alert('Less than 960');
}
else {
    alert('ok');
    $.getScript( 'myscript.js' );
}

但是，这没有达到预期的结果。

Answer 1

出于这些目的，有一个称为matchMedia（）的窗口方法。它使用CSS @media规则功能。针对您情况的简短示例：

function loadScript (rule) {
  if (rule.matches) {
    alert('ok')
    // append script with plain JS, w/o jQuery
    const head = document.querySelector('head')
    const script = document.createElement('script')
    script.src = 'jquerysplitter.js'
    head.appendChild(script)
  } else {
    alert('Less than 800')
  }
}

const mediaRule = window.matchMedia('(min-width: 800px)')
// for the first time, check resolution immediately 
loadScript(mediaRule)
// for later changes, listen to screen resize event
mediaRule.addListener(loadScript)

Answer 2

这应该可以满足您的需求：

$(window).resize(function(){
  if( $(this).width() <= 960 ) {
  $("#script").html().remove();
  } 
});

通过使用JavaScript / jQuery调整窗口大小来激活和停用脚本

2 个答案: