javascript - 如何在网页上启用/禁用(实时)javascript 插件？

Question

我需要实时启用/禁用 .js 插件。当用户调整其浏览器窗口大小时，桌面版变为移动版。问题是我需要禁用一些 javascript ( fullpage.js ) 并添加一些 css。 如果您重新加载页面或在您的电脑上使用全屏窗口，从头到尾都没有问题。问题是:如何在宽度 < 800 时禁用 fullpage.js？ 我试过这些东西:

将此函数添加到主体 onresize 事件(没有重新加载没有结果):

 function checkWidth() {
        if($(window).width() <= 760 ){
            $('#menu-header-button').click(function(){
                $('#navigation').toggleClass('navbar-v');  
                $('#logo-mobile').toggleClass('visible');
                $('#menu-header-button').addClass('disabled');
                 setTimeout(function(){ 
                    $('#menu-header-button').removeClass('disabled');  
                 }, 500);
            });
        } else if($(window).width() > 760 ){
          $('#fullpage').fullpage({
              menu: '#menu',
              anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
              css3: true,
              afterLoad: function(anchorLink, index){
              if( anchorLink == 'firstPage'){
                   $('#navigation').removeClass('navbar-v'); 
              }
          },
              onLeave: function(index, nextIndex, direction){
              setTimeout(function(){ 
                    $('#navigation').addClass('navbar-v'); 
              }, 500); 
              }
            });
        }

这只是有时有效:

$(window).onresize= checkWidth();
function checkWidth() {
                    if($(window).width() == 761 ){
                        location.reload(true);
                    }
                    //...
}

这根本不起作用:

   $(window).onresize= checkWidth();
    function delayCheckWidth(){
      setTimeout(function(){ 
                              checkWidth(); 
                           }, 50); //I thought some delay time can be useful here 
    }
    function checkWidth() {
                        if($(window).width() == 761 ){
                            location.reload(true);
                        }
                        //...
    }

我查看的相关主题:

1. > Throttling
2. > How to disable / Enable plugins?
3. > Enable / Disable JavaScript code
4. > How to disable / Enable plugins?
5. > Enable and disable jquery knob dynamically
6. > Disable and enable jQuery context menu
7. 还有很多。

与实时无关或没有任何有趣/有用的东西。

您有什么建议吗？也许我不需要完全按照这种方式进行？

Answer 1

您是否尝试过 fullPage.js 的 responsive 选项？ 不确定那是您想要的还是您真的需要完全销毁 fullPage.js。

来自 fullPage.js documentation :

responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

fullPage.js 中的正常滚动将保留部分 高度 以及分配给菜单的事件或水平 slider 的控制箭头，但它会像任何网站一样正常滚动。您可以看到该模式的演示 here .

无论如何，如果您真的出于任何原因想要销毁 fullPage.js，则需要使用提供的方法。 来自文档:

$.fn.fullpage.destroy(类型)

Destroys the plugin events and optinally its HTML markup and styles. Ideal to use when using AJAX to load content. ()

type: can be 'empty' or 'all'. If all is passed, the HTML markup and styles used by fullpage.js will be removed. This way the original HTML markup, the one used before any plugin modification is made, will be maintained.

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');