Question

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

我想根据屏幕宽度加载一些内容。它是一个带有社交网络共享按钮的粘性导航栏（在Twitter上关注，就像通常的Facebook一样）。

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

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

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

由于PHP无法知道屏幕宽度（因为我正在使用bootstrap，我遵循它的屏幕尺寸），我认为我可以这样做（我将.html更改为.php，它＆＃39; s都一样）

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

但它没有用。

有没有办法让我使用jQuery来调用include()？或者任何其他方式可以使这项工作？

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

Answer 1

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

但你可以使用一些参数或某种新的url调用页面的重新加载，以使这与php一起工作。

示例onepage php site：

<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>

如果您在网站上没有任何其他获取参数且navbar.php仅包含有效的html内容，则上述示例有效。

包括PHP取决于屏幕宽度大小

1 个答案: