Вызов функции JS при заданной ширине окна

Question

Я хочу вызвать функцию JavaScript, которая проверяет ширину окна каждый раз, когда он загружается, а также каждый раз при изменении размера экрана. Причина этого в том, что я не хочу, чтобы функция использовалась, когда размер экрана становится слишком маленьким, например. мобильный размер.

Можно ли это сделать?

Ive пытался делать что-то вроде этого

window.onload = function() { 
    if (window.onload.innerWidth > 991 || window.onresize.innerWidth > 991) { 
     var maxHeight = 0; 
     setTimeout(function() { 
      maxHeight = 0; 
      $(".menu> div").each(function() { 
       var thisHeight = parseInt($(this).css("height").toString().replace("px", "")); 
       if (thisHeight > maxHeight) { 
        maxHeight = thisHeight; 
       } 
      }); 
      $(".menu> div").css("height", maxHeight.toString() + "px"); 
      $(".menu").sortable({ 
       handle: "h3", 
       placeholder: { 
        element: function (currentItem) { 
         return $("<div class='col-md-4 placeholderBlock' style='height:" + (maxHeight).toString() + "px; '></div>")[0]; 
        }, 
        update: function (container, p) { 
         return; 
        } 
       } 
      }); 
      $(".menu").disableSelection(); 

      $(".widget").each(function() { 
       $(this).click(function() { 
        enableDisableWidget($(this)); 
       }); 
      }); 

      setInterval(function() { 
       var menu= { items: [] }; 
       $(".menu> div").each(function() { 
        menu.items.push(
         { 
          classes: "." + $(this).attr("class").replace(/\ /g, ' ') 
         } 
        ); 
       }); 
       $(".hiddenField_dashboardLayout").val(JSON.stringify(dashboardItems)); 
      }, 500); 
     }, 2000); 
    } 
} 

Answer 1

window.onload.innerWidth > 991 || window.onresize.innerWidth

Это не будет работать. это оба свойства события, которые не имеют свойства, называемого innerWidth.

Вам нужно изменить, что:

document.body.offsetWidth, window.innerWidth или document.documentElement.clientWidth

OnLoad будет делать то, что вы хотите на странице загрузки.

Добавить еще одно событие под названием onresize

$(window).on("resize", function(){}); 

Вы также можете использовать CSS для этого:

@media only screen and (min-width: 991px) { ... } 

правила CSS между фигурных скобках будет применяться только тогда, когда экран больше, чем 991 пикселей ,

Answer 2

Вы можете добавить слушатель на событие изменения размера с помощью JQuery:

$(window).on("resize", function(){ 
    console.log("resized"); 
}); 

или чистого яваскрипта пути, вежливость этого answer.

var addEvent = function(object, type, callback) { 
    if (object == null || typeof(object) == 'undefined') return; 
    if (object.addEventListener) { 
     object.addEventListener(type, callback, false); 
    } else if (object.attachEvent) { 
     object.attachEvent("on" + type, callback); 
    } else { 
     object["on"+type] = callback; 
    } 
}; 

addEvent(window, "resize", function(event) { 
    console.log('resized'); 
}); 

Я написал этот код, надеясь удовлетворить ваши потребности. Чистый JavaScript:

//this function will return true if the window is too small 
var isTooSmall = function(w, h){ 
    console.log(w + " " + h); //just to check width and height 
    var min_w = 200; //set these to what you wish 
    var min_h = 200; 
    if(w < min_w || h < min_h){ 
     return true; 
    } 
    else return false; 
}; 

//this function will allow us to bind listeners given an object and its event. 
//Check the linked stackoverflow answer for more explanation 
var addEvent = function(object, type, callback) { 
    if (object == null || typeof(object) == 'undefined') return; 
    if (object.addEventListener) { 
     object.addEventListener(type, callback, false); 
    } else if (object.attachEvent) { 
     object.attachEvent("on" + type, callback); 
    } else { 
     object["on"+type] = callback; 
    } 
}; 

//resize listener 
addEvent(window, "resize", function(event) { 
    console.log(isTooSmall(window.innerWidth, window.innerHeight)); 

}); 

//onload listener 
window.onload = function() { 
    console.log(isTooSmall(window.innerWidth, window.innerHeight)); 
} 

Вот jsfiddle, чтобы увидеть его в действии.

Answer 3

Это должно работать для вас:

function yourFunction() { 
    if (window.innerWidth >= 992) { 
     //TODO: Your code here 
    } 
} 

// Set both event handlers to same function 
window.onload = window.onresize = yourFunction; 

Кстати, линия ...

if (window.onload.innerWidth > 991 || window.onresize.innerWidth > 991) 

... не работает, потому что window.onload и window.onresize предназначены для функции.

Answer 4

вы могли бы иметь функцию проверить window.innerWidth больше, то ваш предельный размер

var limitFunc = function(){ 
    if (window.innerWidth>999){ 
     /*your functions for big screen*/ 
    console.log('bigScreen') 
    } 
}; 

вы стреляете Предельную функцию на изменения размеров окна и OnLoad события

window.addEventListener("resize", limitFunc); 
window.addEventListener("onload", limitFunc); 

fiddle

Answer 5

function myFunction() { 
 
    var w = window.outerWidth; 
 
    //var h = window.outerHeight; 
 
    
 
    if (w > 991) { 
 
     document.getElementById("p").innerHTML = "big " + w; 
 
    } else { 
 
     document.getElementById("p").innerHTML = "small " + w; 
 
    } 
 
}

<body onresize="myFunction()" onload="myFunction()"> 
 
<p id="p"><p> 
 
</body>