仅在桌面版网站上加载 javascript 的最佳方式？

Question

我的 WordPress 网站上有一个 javascript (jQuery)，我是运行。我只希望在屏幕宽度小于 1024 像素时加载脚本。

这是因为它与顶部导航菜单的功能有关。我只希望在屏幕宽度小于 1024 像素时加载此脚本，因为在该宽度下的任何内容都将具有完全不同的菜单样式/功能。

当然，我的 CSS 文件中有大量媒体查询，这些媒体查询更改了最小宽度的设计：1024px。

我找到了几种方法来做到这一点，我只是想确定最好的方法是什么。

这是我当前 javascript 文件的副本：

function accordion_menus(){

// if we are not on mobile (menu icon is hidden) show sub items and bail
console.log('debug: start');
if ( jQuery('#primary-navigation .menu-toggle').is(':hidden') ){

    console.log('debug: yes, it is hidden');
    // show sub menus
    $('#primary-navigation ul.nav-menu ul.sub-menu').show();
    return;
} else{
    // hide sub menus
    $('#primary-navigation ul.nav-menu ul.sub-menu').hide();
}

// top level nav click function
$('#primary-navigation ul.nav-menu > li > a').click(function(e){

// store parent li to variable
var parent_li = $(this).parent('li');

// if sub menu does not exist in parent li
if ( !$('ul.sub-menu', parent_li).first().length ) {
    return;
}

// if sub menu is already active, bail
if ( parent_li.hasClass('sub-menu-active') ){
        parent_li.find('ul').slideUp(100, function(parent_li){
});
            parent_li.removeClass('sub-menu-active');     

    return false;
}

// stop link click
e.preventDefault();

// store current sub menu in variable
var current_submenu = $('ul.sub-menu', parent_li).first();

// slide up non-current sub menus
$('#primary-navigation').find('ul.sub-menu').not(current_submenu).slideUp(function(parent_li){

    // remove sub-menu-active class from all first level items except current parent li
    $('#primary-navigation').find('li').not(parent_li).removeClass('sub-menu-active');

});

// slide down current sub menu
current_submenu.slideDown(100, function(){
    // add sub-menu-active to current parent li
    parent_li.addClass('sub-menu-active');
});

});

// second level nav click function
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > a').click(function(e){

// store parent li to variable
var parent_li = jQuery(this).parent('li');

// if sub menu does not exist in parent li
if ( !jQuery('ul.sub-menu', parent_li).first().length ) {
    return;
}

// if sub menu is already active, bail
if ( parent_li.hasClass('sub-menu-active') ){
                parent_li.find('ul').slideUp(100, function(){

    // remove sub-menu-active class from all first level items except current parent li
});    
    parent_li.removeClass('sub-menu-active');     
    return false;
}

// stop link click
e.preventDefault();

// store current sub menu in variable
var current_submenu = jQuery('ul.sub-menu', parent_li).first();

// slide up non-current sub menus
jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li > ul.sub-menu').not(current_submenu).slideUp(function(){

    // remove sub-menu-active class from all second level items except current parent li
    jQuery('#primary-navigation ul.nav-menu ul.sub-menu > li').not(parent_li).removeClass('sub-menu-active');

});

// slide down current sub menu
current_submenu.slideDown(100, function(){
    // add sub-menu-active to current parent li
    parent_li.addClass('sub-menu-active');
});

});

}

// load menu accordion on doc ready
jQuery(document).ready(function($) {
accordion_menus();
});

// load menu accordion on window resize
jQuery(window).resize(function(){
accordion_menus();
});

Answer 1

jQuery(document).ready(function(){
    function resizeForm(){
        var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth;
        if(width > 1024){

        } else {

        }    
    }
    window.onresize = resizeForm;
    resizeForm();
});

我用过很多次。将在每次 window 调整大小时重新运行 JS。如果您不想这样，只需删除 window.onresize = resizeForm;。应该在所有浏览器中工作，因此 width.innerWidth 检查。

仅在桌面版网站上加载 javascript 的最佳方式？

Best way to have a javascript load only on desktop version of site?

javascript

jquery

wordpress

media-queries