Foros del Web » Programando para Internet » Jquery »

Detectar resolución con javascript y luego activar o desactivar un include php

Estas en el tema de Detectar resolución con javascript y luego activar o desactivar un include php en el foro de Jquery en Foros del Web. Buenas. Se que esta pregunta se ha hecho muchas veces en el foro, vuelvo años después a utilizar el buscador e incluso habiendo encontrado dos ...
  #1 (permalink)  
Antiguo 11/07/2019, 18:26
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.928
Antigüedad: 16 años, 7 meses
Puntos: 62
Detectar resolución con javascript y luego activar o desactivar un include php

Buenas.

Se que esta pregunta se ha hecho muchas veces en el foro, vuelvo años después a utilizar el buscador e incluso habiendo encontrado dos temas parecidos no he logrado sacarlo ya que al parecer antes casi tampoco se lograba.

http://www.forosdelweb.com/f18/inclu...talla-1068658/
http://www.forosdelweb.com/f13/mostr...nclude-736728/

Mi idea es que con javascript sepa el actual ancho del navegador del usuario y luego según ese ancho introduzca un include php o no. Por ejemplo:

Código HTML:
<!-- @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> 
El include php son dos columnas izquierda y derecha de un aside que tengo que desactivar en móviles ya que en media querys con css no entran y se ocultan sin embargo en google https://developers.google.com/speed/pagespeed/insights/ he de desactivarlos para que no los reconozca ni carguen y así mejora la puntuación.

Código PHP:
<?php include "modules/aside-izq.php"?>
Código PHP:
<?php include "modules/aside-der.php"?>
¿Hay alguna opción para llevar el resultado de javascript a php y así según la resolución cargar o no cargar dichos includes?

Repito en el CSS media queries ya están desactivados esos dos aside, solo me falta desactivar los dos includes php.

Saludos.
  #2 (permalink)  
Antiguo 11/07/2019, 20:14
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.957
Antigüedad: 11 años, 2 meses
Puntos: 2184
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

La única opción que se me ocurre con Javascript es cargar el contenido y, de ser necesario, usar AJAX para cargar el aside.

Creo que sería mejor tratar de detectar el dispositivo desde PHP. Alguna vez lo intenté, a ver si te sirve: http://www.forosdelweb.com/f18/mejor...oviles-945378/
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 11/07/2019, 22:03
 
Fecha de Ingreso: abril-2006
Mensajes: 304
Antigüedad: 13 años, 5 meses
Puntos: 56
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

Cita:
Iniciado por kahlito Ver Mensaje
Buenas.

Se que esta pregunta se ha hecho muchas veces en el foro, vuelvo años después a utilizar el buscador e incluso habiendo encontrado dos temas parecidos no he logrado sacarlo ya que al parecer antes casi tampoco se lograba.

http://www.forosdelweb.com/f18/inclu...talla-1068658/
http://www.forosdelweb.com/f13/mostr...nclude-736728/

Mi idea es que con javascript sepa el actual ancho del navegador del usuario y luego según ese ancho introduzca un include php o no. Por ejemplo:

Código HTML:
<!-- @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> 
El include php son dos columnas izquierda y derecha de un aside que tengo que desactivar en móviles ya que en media querys con css no entran y se ocultan sin embargo en google https://developers.google.com/speed/pagespeed/insights/ he de desactivarlos para que no los reconozca ni carguen y así mejora la puntuación.

Código PHP:
<?php include "modules/aside-izq.php"?>
Código PHP:
<?php include "modules/aside-der.php"?>
¿Hay alguna opción para llevar el resultado de javascript a php y así según la resolución cargar o no cargar dichos includes?

Repito en el CSS media queries ya están desactivados esos dos aside, solo me falta desactivar los dos includes php.

Saludos.
y por que no mejor, hacer un LOAD de un archivo digamos de 256Kb, y mediante AJAX, verificas, el tiempo que demoro en descargarlo y segun ese tiempo haces los cálculos, ese archivo de 256Kb, debe ser fijo, y no cacheado. el mismo ajax recuerdo que tenia que por cada petición tenia informacion de cuanto le demoro en realizarlo. y esa informacion la guardas por unas horas mediante una COOKIE.

pero todo ello debes realizarlo con JAVASCRIPT, mediante PHP no puedes saber tu cliente cuanto de ancho de banda esta usando o tiene.
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.me/pools/c/87BTML2gwr
  #4 (permalink)  
Antiguo 13/08/2019, 04:18
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.928
Antigüedad: 16 años, 7 meses
Puntos: 62
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

Hola de nuevo.

La verdad es que desde entonces he estado mirando todo tipo de opciones para resolverlo, incluyendo vuestros consejos (Triby y tuadmin) pero no lo conseguía, así que finalmente creo que casi estoy consiguiendo una opción que me puede servir, donde nada más cargar la web hago el scrtip para que lea la resolución y luego enviar ese valor a php para que este a la vez luego lo envie al template y este decida si cargar los includes o no. Por ejemplo así:

En el index tengo este script que creo que me puede servir de esta dos maneras, no se cual sería la más correcta.

Opción 1 con POST y respuesta en php externo.

Código Javascript:
Ver original
  1. <!-- Opción 1 a través de POST -->
  2.  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4. <script type="text/javascript">
  5.  
  6. var cargarInclude = 0;
  7.  
  8. $(document).ready(function(){  
  9.  
  10.     var resolucion = $( window ).width();    
  11.  
  12.     $.ajax({
  13.         type:'POST',
  14.         url:'views/modules/resolucionAjax.php',      
  15.         data: { resolucion: resolucion },
  16.         success:function(respuesta){
  17.             console.log("Respuesta de Php:" +respuesta);
  18.             //alert(respuesta);
  19.  
  20.             if(respuesta <= 767){
  21.                 console.log("La respuesta dentro de success es: No cargo include o cargo template móviles");                
  22.                 cargarInclude = 0;
  23.             }
  24.             else{
  25.                 console.log("La respuesta dentro de success es: Si cargo include o cargo template grande");              
  26.                 cargarInclude = 1;
  27.             }            
  28.            
  29.         }
  30.  
  31.     });
  32.  });
  33. </script>

Luego en resolucionAjax.php recibo los valores para que ajax los vuelva a recibir como respuesta.

Código PHP:
Ver original
  1. <?php
  2. $respuesta = $_POST["resolucion"];
  3. echo $respuesta;
  4. ?>


Opción 2 en un mismo archivo.

Código Javascript:
Ver original
  1. <!-- Opción 2 -->
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <script type="text/javascript">
  4.  
  5. var resolucionMoviles = false;
  6.  
  7. $(document).ready(function(){
  8.     var width = window.innerWidth;
  9.     var resolucion = $( window ).width();
  10.    
  11.     if(resolucion <= 767){
  12.         console.log("No cargo include o cargo template móviles");
  13.         cargarInclude = 0;
  14.     }
  15.     else{
  16.         console.log("Si cargo include o cargo template grande");
  17.         cargarInclude = 1;
  18.     }
  19.  });
  20. </script>

Y luego la idea sería imprimirla en el index con php y ya así con esta variable hacer el resto.

Código PHP:
Ver original
  1. <?php
  2. echo "<p>La variable cargarInclude viene desde jquery con valor: " .$cargarInclude."</p>";
  3. ?>

Pero claro no viene ningún valor ya que no se si es posible hacerlo así o como traer siguiendo estas dos opciones el valor obtenido en jquery con la variable cargarInclude para que lo lea php

¿Se puede hacer de esta manera? ¿Cómo podría pasar ese valor de jquery a php?

Gracias de nuevo por vuestra ayuda, saludos.

Última edición por kahlito; 13/08/2019 a las 04:32
  #5 (permalink)  
Antiguo 13/08/2019, 15:48
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.957
Antigüedad: 11 años, 2 meses
Puntos: 2184
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

Si tu preferencia es encararlo con javascript solo avisa para mover el tema al foro adecuado.
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 13/08/2019, 15:55
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.928
Antigüedad: 16 años, 7 meses
Puntos: 62
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

Hola de nuevo Triby.

La verdad no se si es el foro de javascript, jquery o ajax ya que estoy empezando con esta parte, pero si es cierto que si consigo de primera hora cargar ese script javascript/jquery y hacer llegar la variable cargarInclude = 0; o cargarInclude = 1; a php $cargarInclude ya estaría todo en correcto funcionamiento.

Si crees que es la mejor opción adelante entonces.

Gracias de nuevo, un saludo.
  #7 (permalink)  
Antiguo 19/08/2019, 06:54
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.928
Antigüedad: 16 años, 7 meses
Puntos: 62
Respuesta: Detectar resolución con javascript y luego activar o desactivar un include

Hola de nuevo.

Parece que finalmente he encontrado la solución de esta manera.

Primero meto en el template general de la web antes del header este script para crear una cookie con el ancho actual de pantalla.

Código Javascript:
Ver original
  1. <!--=====================================
  2.         COOKIE MASTER RESPONSIVE INCLUDES ASIDE
  3.         ======================================-->  
  4.         <script src="<?php echo $url; ?>views/js/jquery.cookie.js"></script>
  5.         <script type="text/javascript">
  6.             function setScreenHWCookie() {                
  7.                 var resolucion = $( window ).width();
  8.                 $.cookie('ancho',resolucion);      
  9.                
  10.                 return true;
  11.             }
  12.             setScreenHWCookie();
  13.         </script>

Luego justo debajo le añado el valor del ancho del script anterior a php y a la vez creo la variable de cargar o no los dos includes.

Código PHP:
Ver original
  1. <?php        
  2.         if($_COOKIE['ancho'] <= 767){
  3.            //echo "No cargo includes";
  4.             $cargarInclude = 0;
  5.         }
  6.         else{
  7.             //echo "Si cargo includes";
  8.             $cargarInclude = 1;
  9.         }?>

Y ya luego en el resto de contenidos del template en la zona de carga de cada include.php dentro de los asides laterales le añado esta parte final en php y listo:

Código PHP:
Ver original
  1. <?php
  2. if($cargarInclude == 1){
  3.    
  4.     include "modules/aside-izq.php";
  5.         include "modules/aside-der.php";
  6.  
  7.  }
  8.  else{
  9.     //echo "No meto ningún include aside";
  10. }
  11. ?>

Así parece que por fin google insight no carga o no lee o tiene en cuenta esos dos includes php aun estando debajo de 767 pixeles ya que incluso antes cuando ya desaparecían ya con el css de media queries responsive los seguía teniendo en cuenta, además ahora pasa de 39 a 75 puntos como mínimo.

No sé si es la mejor manera, supongo que se puede mejorar pero al menos parece que por ahora funciona perfectamente.

La cookie de este script la he descargado de este enlace, lo dejo aquí por si le puede servir a alguien más.

https://github.com/carhartl/jquery-cookie

Gracias de nuevo a todos por vuestra ayuda, saludos.



La zona horaria es GMT -6. Ahora son las 12:20.