针对特定 window 大小重新加载网站一次

Question

我只想为 1000px 下的 window 尺寸加载特定功能。这通常有效，但如果我更改 window 大小并且不重新加载页面，则无效。所以我想我可以在网站重新加载时编码一个特定的点，所以这个函数只出现在 window 大小 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>

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

Answer 1

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

正如 jQuery 文档所说：

The resize event is sent to the window element when the size of the browser window changes

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

Answer 2

希望这对您有所帮助。

我首先为调整大小事件添加一个事件侦听器。我检查了 window 和 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>

针对特定 window 大小重新加载网站一次

Reload website once for specific window size

javascript

jquery

media-queries