jquery - 最大化和按下恢复按钮时刷新网站jquery
问题描述
当用户缩小浏览器窗口时,我想重新加载网站。我已经让它工作了,但是当你在缩小浏览器窗口的大小后按下最大化按钮时,它不会恢复正常,它会停留在移动视图中。
我找到了一个有效但不是 100% 的代码。如果这里有人可以帮助我,我将不胜感激。我对 javascript/jQuery 真的很陌生。下面是 jQuery 代码,我觉得它不是最好看的,但它有点工作。
$(window).on('resize', function(event) {
var windowSize = $(window).width(); // Could've done $(this).width()
//Smartphones, Portrait iPhone, Portrait 480x320 Phones (Android)
if (windowSize < 320) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
//Smartphones, Android Phones, Landscape iPhone
} else if (windowSize < 480) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
}
//Portrait Tablets, Portrait iPad, E-readers (Nook/Kindle), Landscape 800x480 Phones (Android)
else if (windowSize < 600) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
} else if (windowSize < 690) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
}
//Tablet, Landscape iPad, Lo-res Laptops and Desktops
else if (windowSize < 801) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
} else if (windowSize < 995) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
}
//Big Landscape Tablets, Laptops, and Desktops
else if (windowSize < 1025) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
}
//Hi-res Laptops and Desktops
else if (windowSize < 1281) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
} else if (windowSize < 1440) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 200);
});
} else if (windowSize > 1440) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
$('body').prepend('<div>' + $(window).width() + '</div>');
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 10);
});
} else {
$('html').css('color', 'black');
}
});
解决方案
所以我现在已经完成了大部分工作。但是当我说 1050 像素时,它会不断更新。有谁知道它是否可以在精确分辨率匹配时更新?我坚持我已经用 === 做到了,但没有。
jQuery:
$(window).on('resize', function(event) {
var windowSize = $(window).width(); // Could've done $(this).width()
if ($('.toggle-menu').width() === 1599) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 1300) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 820) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 821) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 1024) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 900) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 768) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
} else if ($('.toggle-menu').width() === 769) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
}
else if ($('.toggle-menu').width() === 1050) {
//Refresh page on browser resize
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 1000);
});
}
});
//Update the website when you press the maximize button
$(window).resize( function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* False to get page from cache */
}, 10);
});
推荐阅读
- markdown - Markdown target="blank" (html) 不起作用
- html - 使用 flexbox 将 ul 的第一个 li 向左对齐,其余的向右对齐,并使它们成为列
- php - 安装了 IMAP 模块的 Google AppEngine
- scala - 如何将 Scala Maps 与 akka-kryo-serializer 一起使用
- angular6 - 在对角度智能表进行任何发布请求后重新加载页面
- class - 课堂上的空窗
- unit-testing - 如何在 Sinon 中模拟内部函数?
- zsh - 使用 tmux 时转义 zsh vi 模式的“插入模式”
- api - 在机器人框架中是否可以通过 api 在另一个关键字中定义一组关键字
- php - PHP / Yii2 在注册前检查数据库中的至少 1 个位置是否有足够的时间空闲