php - 如何使用 jQuery 或任何其他方法根据浏览器窗口宽度动态加载不同的 php 文件

Question

friend 们大家好，这是一个非常新手的问题，因为我对编程非常陌生。

我在浏览网页时发现了一种根据浏览器宽度动态加载 CSS 文件的方法。

jQuery

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

HTML

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

我想知道，我可以用它来加载 php file ？

如果是，代码会是什么样子？

我认为我们将需要使用类似 <?php require_once('http://mysite.com/layouts/ipad.php'); ?> 的东西但我该如何编码呢？​​

请帮忙。

问候

Answer 1

I want to know, can I use the same to load a php file?

如果“加载 php 文件”的意思是加载不同的页面，您将在其中为不同的条件(宽度等)定义不同的页面，那么您可以通过设置 window.location 加载不同的页面。等于所需的页面。这会将当前页面替换为您指定的页面。

不过，我认为您不应该在每次调整窗口大小时都执行此操作。如果您必须这样做，至少检查新尺寸是否确实需要更改，而不是无论如何都重复重新加载它。

以下代码与您现有的代码类似:

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    width = parseInt(width);
    if (width < 701) {
        setLocation("yournarrowpage.php");
    } else if (width < 900) {
        setLocation("yourmediumpage.php");
    } else {
        setLocation("yourwidepage.php");
    }
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});

不过，您不必每次都重新加载整个页面，您可以使用 ajax 仅重新加载某些部分。为此，您可以执行与上述类似的操作，除了使用 jQuery's .load() method 而不是设置 window.location 。 :

function setLocation(url) {
   $("selector for the element to reload").load(url);
}