我知道这个问题已经在论坛中被问过好几次了,但我没有达到我所找到的结果。
我的想法是,使用 javascript 您知道用户浏览器的当前宽度,然后根据该宽度输入 php 是否包含。例如:
<!-- @media(max-width:767px) { -->
<script type="text/javascript">
if (window.matchMedia("(max-width:767px)").matches) {
/* La pantalla tiene menos o igual de 767 píxeles de ancho, entonces no incluyo el include php o includes php*/
} else {
/* La pantalla tiene más o igual de 767 píxeles de ancho, entonces si incluyo el include php o includes php */
}
</script>
包含 php 是我必须在移动设备上禁用的左右两列,因为带有 css 的媒体查询不会输入并且隐藏在谷歌https://developers.google.com/speed/pagespeed/insights/我必须停用它们,以便它们不被识别或加载,从而提高分数。
<?php include "modules/aside-izq.php"; ?>
<?php include "modules/aside-der.php"; ?>
是否可以选择将结果从 javascript 转换为 php,因此,根据分辨率,加载或不加载所说的包含?
我在 CSS 媒体查询中重复这两个方面已经停用,我只需要停用两个 php 包含。
编辑以添加新选项
再一次问好。
我想我几乎得到了一个可以帮助我的选项,一旦我加载网络,我就会制作脚本来读取分辨率,然后将该值发送到 php,以便它同时将其发送到模板它决定是否加载包含。例如像这样:
在索引中我有这个脚本,我认为可以以这两种方式使用,我不知道哪个是最正确的。
带有 POST 和外部 php 响应的选项 1。
<!-- Opción 1 a través de POST -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var cargarInclude = 0;
$(document).ready(function(){
var resolucion = $( window ).width();
$.ajax({
type:'POST',
url:'views/modules/resolucionAjax.php',
data: { resolucion: resolucion },
success:function(respuesta){
console.log("Respuesta de Php:" +respuesta);
//alert(respuesta);
if(respuesta <= 767){
console.log("La respuesta dentro de success es: No cargo include o cargo template móviles");
cargarInclude = 0;
}
else{
console.log("La respuesta dentro de success es: Si cargo include o cargo template grande");
cargarInclude = 1;
}
}
});
});
</script>
然后在 resolutionAjax.php 中接收值,以便 ajax 再次接收它们作为响应。
<?php
$respuesta = $_POST["resolucion"];
echo $respuesta;
?>
选项 2 在同一文件中。
<!-- Opción 2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var resolucionMoviles = false;
$(document).ready(function(){
var width = window.innerWidth;
var resolucion = $( window ).width();
if(resolucion <= 767){
console.log("No cargo include o cargo template móviles");
cargarInclude = 0;
}
else{
console.log("Si cargo include o cargo template grande");
cargarInclude = 1;
}
});
</script>
然后想法是用 php 在索引中打印它,然后用这个变量做剩下的事情。
<?php
echo "<p>La variable cargarInclude viene desde jquery con valor: " .$cargarInclude."</p>";
?>
但是当然没有价值,因为我不知道是否可以这样做或者如何通过遵循这两个选项将在 jquery 中获得的值与loadInclude变量一起使用,以便它可以被 php 读取
可以这样做吗?我如何将该值从 jquery 传递给 php?
再次感谢您的帮助,问候。
我认为您想做的事情相对简单,如果有点长,则取决于您的操作方式。
一种简单的方法是让您创建与要放在页面上的 html 代码一样多的 php 脚本。
稍后,通过 ajax,您从服务器检索模块,就像您在选项 1 中所做的那样,并将响应添加到页面的 html 代码中
如果一切正常,它应该可以工作(我还没有测试过,所以可能存在语法错误,但我认为这个概念是正确的)
但是,正如您被告知的那样,您实际上无法使用 JavaScript 加载 PHP 包含,因此了解您在做什么很重要。我在前几行中向您展示的内容是,它的作用是从服务器发送一个 html,该 html 稍后会由于进行的 AJAX 查询而添加到您的页面中,这存在一个问题,即如果有人使用帖子进行查询“/views/modules/moduloX.php”将返回与 AJAX 查询中返回的相同的 html。
另一方面,谷歌机器人不执行css媒体查询对我来说似乎很奇怪(可能是,我没有检查过),但我已经告诉过你,如果它不执行css,我不认为它将执行 JavaScript,原因如下:
希望有帮助,最好的问候。
我认为使用javascript还有另一种更简单的可能性:
首先,从 php 加载整个网络。
然后从 JavaScript 中删除您不想显示的 HTML,为此,您必须将其添加
<script></script>
到头部内的标记中。上面的代码所做的就是根据窗口大小是否合适,在页面加载之前找到你不想显示的元素并删除它们。这样,
PHP
您所做的就是在页面加载之前删除内容,而不是发送到窗口的大小。让我们看看这种其他方法是否更适合您。一切顺利。
编辑
由于您使用的是 JQuery,因此我认为可以简化代码。
让我们看看这段代码是否有效,问候。
看来我终于以这种方式找到了解决方案。
首先,我将此脚本放在通用 Web 模板中的标题之前,以创建具有当前屏幕宽度的 cookie。
然后在下面我将前一个脚本的宽度值添加到 php 中,同时我创建了要加载的变量,或者不包含这两个。
然后在模板的其余内容中,在每个 include.php 的加载区域中,我在 php 中添加了最后一部分,就是这样:
所以似乎最终谷歌洞察力没有加载或没有读取或考虑这两个 php 包括,即使它们低于 767 像素,因为甚至在之前,当它们已经随着响应式媒体查询 css 消失时,它仍然把它们带入帐户,现在它发生在最低 39 到 75 点之间。
我不知道这是否是最好的方法,我想它可以改进,但至少它现在看起来很完美。
我已经从这个链接下载了这个脚本的 cookie,我把它留在这里,以防它对其他人有用。
https://github.com/carhartl/jquery-cookie
再次感谢您的帮助和建议,干杯。
你本可以做到这一点要简单得多。
首先在您的代码中
php
包含以下行:<?php echo "<div id='showInclude'></div>";?>
在你的脚本中:(确保你没有在 onload 事件中加载脚本)