Question

我想调用一个JavaScript函数来检查每次加载时窗口的宽度，以及每次重新调整屏幕大小时。这样做的原因是我不想在屏幕尺寸太小时使用功能，例如移动尺寸。

可以这样做吗？

我尝试过做这样的事情

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

您可以通过功能检查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 3

您可以使用jQuery将侦听器添加到resize事件：

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

或纯粹的javascript方式，礼貌地提供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 4

这应该适合你：

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

顺便说一句，......

window.onload

...不起作用，因为window.onresize和{{1}}是函数。

Answer 5

＆＃13;

content

＆＃13;

function onSubmit() {
  var title = document.getElementById("linkTitle").value;
  linkList.push({
    "title": title,
    "url": document.getElementById("xLink").value,
    "author": document.getElementById("name").value
  });
  content.innerHTML = ""; // clearing the content div
  linkList.forEach(function (link) {
      content.appendChild(createLinkElement(link));
  });
  var alert = document.getElementById("alert"); // can be taken outside the function, as it is engough to get it once
  alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
  setTimeout(function () {
    alert.innerHTML = "";
  }, 2000);
}

＆＃13;

以设置的窗口宽度调用JS函数

5 个答案: