针对特定窗口大小重新加载网站一次答案

【问题标题】：Reload website once for specific window size针对特定窗口大小重新加载网站一次
【发布时间】：2021-08-18 05:25:58
【问题描述】：

我只想为1000px 下的窗口大小加载特定函数。这通常有效，但如果我更改窗口大小并且不重新加载页面，则不会。所以我想我可以在网站重新加载时编写一个特定的点，所以这个函数只出现在1000px的窗口大小下。

这是我的尝试：

if ($(window).width() = 1000) {
  $(window).on("resize", function() {
    this.location.href = this.location.href;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span>Page should reload once if the window size has 1000px.</span>

不幸的是，它不起作用。为什么？有人可以帮我吗？

【问题讨论】：

当您的 javascript 运行时，它会在运行时评估窗口宽度。如果要在调整屏幕大小时检查宽度，则需要将检查放在 resize 事件侦听器中。
@AsyncAwaitFetch – 很有趣。但我仍然不知道该怎么做。可以给我看看吗？

标签： javascript jquery media-queries

【解决方案1】：

希望这会有所帮助。

我首先为 resize 事件添加了一个事件监听器。我检查了窗口的宽度，以及表明我们已经被重定向的查询字符串的 url。如果宽度超过 1000 并且我们已被重定向，我会从 url 中删除查询字符串。如果我们之前没有运行过，并且我们的宽度为 1000 或以下，我会将我们重定向到同一页面，但是我添加了一个查询字符串，以便函数可以看到我们不应再次重定向。这可以防止页面加载太多次，因为在手动调整大小时会触发多次调整大小事件。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <script>
      window.addEventListener("resize", () => {
        const widthAbove1000 = window.innerWidth > 1000;

        const urlParams = new URLSearchParams(window.location.search);
        let noRun = urlParams.get('noRun');

        if (widthAbove1000 && noRun)
          window.location.href = window.location.href.split("?")[0];

        if (widthAbove1000 || noRun) return;

        window.location.href = window.location.href + "?noRun=true";
      });
    </script>
  </body>
</html>

【讨论】：

你真是个天才！ ????

【解决方案2】：

也许尝试使用 jQuery 中的 .resize() 方法并将“=”更改为“link to w3schools

正如 jQuery 文档所说：

当浏览器窗口的大小发生变化时，会向窗口元素发送resize事件

$(window).resize(function() {
  if ($(window).width() <= 1000) {
    this.location.href = this.location.href;
  }
});

【讨论】：

而不是=== 1000，应该是< 1000，因为您在恰好 1000 像素处触发事件的几率很低
我对这个答案的担忧是，每次页面大小调整到 1000 以下时您都会重新加载，您可能只希望它在超过 1000 或以下时重新加载。我正在考虑将查询字符串添加到重定向，检查并在它变大时删除。