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'); ?>
的东西但我该如何编码呢?
请帮忙。
问候
最佳答案
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);
}
关于php - 如何使用 jQuery 或任何其他方法根据浏览器窗口宽度动态加载不同的 php 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8707943/