根据屏幕宽度大小包括PHP


Including PHP depending on screen width size

我读了很多关于它的书,也尝试了很多。。。我几乎认为这是可能的,但我需要你的帮助。

我想根据屏幕宽度加载一些内容。这是一个带有社交网络共享按钮的粘性导航栏(通常在推特上关注,就像在脸书上一样)。

使用这段代码,它完美地加载了html。但里面的剧本却没有。当光标位于徽标上时,我使用jQuery动画来显示按钮,按钮使用javascript来工作。但是,以这种方式加载,就好像html中没有脚本一样。

$(function () {
   var width = $(window).width();
   if (document.documentElement.clientWidth >= 992) 
      $('#Navbar').load('navbar.html');
});

然后我尝试了PHP。一个简单的include()起作用。导航栏按照预期方式加载。

由于PHP无法知道屏幕宽度(由于我使用引导程序,我遵循它的屏幕大小),我认为我可以做到这一点(我将.html改为.PHP,一切都一样)

$('#NavBar').append('<?php include "navbar.php"; ?>');

但它不起作用。

有没有一种方法可以让我使用jQuery调用include()?或者任何其他方式可以让它发挥作用?

媒体查询和display: hidden不是选项。我不想加载内容并将其隐藏。我只想在需要的时候加载它。

这是两种完全不同的编程语言,因此您无法从javascript中调用php函数。

但是,您可以使用一些参数或某种新的url来调用页面的重载,从而使php能够正常工作。

示例一页php站点:

<html>
<head>
<!--Your Stuff-->
</head>
<body>
<?php
  //access the parameter and it's value with php's global $_GET
  if(isset($_GET["mobile"]) && $_GET["mobile"] == 992){
    include "navbar.php";
  }
?>
<script>
//check if the document has the specified width and also if the parameter is already set
if (document.documentElement.clientWidth >= 992 && window.location.href.indexOf("?mobile=992") == -1) {
  window.location.href = window.location.href + "?mobile=992";
}
</script>
</body>
</html>

如果你在网站上没有任何额外的get参数,并且navbar.php只包含有效的html内容,那么上面的例子就可以了。