I know that this question has been asked several times in the forum but I have not achieved the result I am looking for with what I found.
My idea is that with javascript you know the current width of the user's browser and then according to that width enter a php include or not. For example:
<!-- @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>
The include php are two left and right columns of a aside that I have to disable on mobile since media queries with css do not enter and are hidden however in google https://developers.google.com/speed/pagespeed/insights/ I have to deactivate them so that they are not recognized or loaded and thus improve the score.
<?php include "modules/aside-izq.php"; ?>
<?php include "modules/aside-der.php"; ?>
Is there an option to take the result from javascript to php and thus, depending on the resolution, load or not load said includes?
I repeat in the CSS media queries those two asides are already deactivated, I just need to deactivate the two php includes.
EDIT TO ADD NEW OPTION
Hello again.
I think I'm almost getting an option that can help me, where as soon as I load the web I make the script to read the resolution and then send that value to php so that it at the same time then sends it to the template and it decides whether to load the include or not. For example like this:
In the index I have this script that I think can be used in these two ways, I don't know which would be the most correct.
Option 1 with POST and response in external php.
<!-- 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>
Then in resolutionAjax.php I receive the values so that ajax receives them again as a response.
<?php
$respuesta = $_POST["resolucion"];
echo $respuesta;
?>
Option 2 in the same file.
<!-- 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>
And then the idea would be to print it in the index with php and then with this variable do the rest.
<?php
echo "<p>La variable cargarInclude viene desde jquery con valor: " .$cargarInclude."</p>";
?>
But of course there is no value since I don't know if it is possible to do it that way or how to bring the value obtained in jquery with the loadInclude variable by following these two options so that it can be read by php
Can it be done this way? How could I pass that value from jquery to php?
Thanks again for your help, regards.
What I think you want to do is relatively simple if a bit long, depending on how you do it.
A simple way would be for you to create as many php scripts as html codes you want to put on the page.
Later, through ajax, you retrieve the modules from the server as you have done in Option 1 and add the response to the html code of the page
And if everything is ok it should work (I haven't tested it, so there may be syntax errors, but I think the concept is correct)
However, as you've been told, you can't actually load a PHP include with JavaScript, so it's important to understand what you're doing. What I have shown you in the previous lines, what it does is send an html from the server that is later added to your page thanks to the AJAX query that is made, this has the problem that if someone makes a query with a post to "/views/modules/moduloX.php" will return the same html that is returned in the AJAX query.
On the other hand, it seems strange to me that the google robot does not execute the css media query (which could be, I have not checked), but I already told you that if it does not execute the css, I do not think it will execute JavaScript, for the following reasons:
Hope that helps, best regards.
I think there is another simpler possibility using javascript:
First of all, from php you load the entire web.
Then from JavaScript you remove the HTML that you do not want to display, to do this, you must add this in a tag
<script></script>
inside the head.What the above code does is find the elements you don't want to display and delete them before the page loads based on whether the window size is appropriate. This way, instead of sending to
PHP
the size of the window, what you do is delete the content before the page loads.Let's see if this other approach is better for you. All the best.
edit
Since you're using JQuery, I think the code can be simplified.
Let's see if this code works, greetings.
It seems that I have finally found the solution in this way.
First I put this script in the general web template before the header to create a cookie with the current width of the screen.
Then just below I add the value of the width of the previous script to php and at the same time I create the variable to load or not the two includes.
And then in the rest of the contents of the template in the loading area of each include.php within the lateral asides I add this final part in php and that's it:
So it seems that finally google insight does not load or does not read or take into account those two php includes even when they are below 767 pixels since even before, when they already disappeared with the responsive media queries css, it was still taking them into account, and now it happens from 39 to 75 points minimum.
I don't know if it's the best way, I suppose it can be improved but at least it seems to work perfectly for now.
I have downloaded the cookie from this script from this link, I leave it here in case it can be useful to someone else.
https://github.com/carhartl/jquery-cookie
Thanks again for the help and advice, cheers.
You could have done this is much simpler.
First in your code
php
include the following line:<?php echo "<div id='showInclude'></div>";?>
And in your script: (make sure you are not loading the script in an onload event)