Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » Detectar resolución con javascript y luego activar o desactivar un include php

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

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

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

Publicado por José Carlos (15 intervenciones) el 12/07/2019 02:52:15
Buenas.

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:

1
2
3
4
5
6
7
8
9
10
<!-- @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.

1
2
<?php include "modules/aside-izq.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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Mauro
Val: 2.761
Oro
Ha aumentado 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

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

Publicado por Mauro (1036 intervenciones) el 12/07/2019 17:08:11
Para llevar un valor de js a php puedes seguir este ejemplo.

Sin embargo, veo un poco complicado tu problema... deberías hacer que cada vez que cambia la resolución (Por ejemplo al maximizar) se le informe eso al backend.

Imagino que lo que podrías hacer es tener la información guardada en la sesión y, en base a eso, cada php decidirá si hace o no el include...

Claro que para que todo esto funcione tendrás que tener un primer punto de partida en el que no tendrás disponible aún la info de la resolución... ahí no veo cómo podrás tomar la decisión
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alejandro
Val: 1.634
Plata
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

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

Publicado por Alejandro (839 intervenciones) el 12/07/2019 18:27:47
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Me imagino lo siguiente y así es como entiendo que lo estas viendo.
Tienes 3 columnas y la central es el contenido principal
Si el ancho es estrecho no debes mostrar las columna laterales.

¿Porque no mejor...?
Tienes una sola columna
Si el ancho es amplio debes mostrar las columnas laterales, en lugar de include() en PHP lo haces con AJAX.
Una vez cargados si haces resize a la ventana entonces si con CSS ocultas o muestras.

No se si te funcione para la puntuación de google.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

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

Publicado por José Carlos (15 intervenciones) el 13/08/2019 13:01:45
Hola de nuevo.

La verdad es que desde entonces he estado mirando todo tipo de opciones para resolverlo, incluyendo vuestros consejos 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 envíe 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 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>

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

1
2
3
4
<?php
$respuesta = $_POST["resolucion"];
echo $respuesta;
?>


Opción 2 en un mismo archivo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 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>

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

1
2
3
<?php
echo "<p>La variable cargarInclude viene desde jquery con valor: " .$cargarInclude."</p>";
?>

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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de José Carlos
Val: 31
Ha disminuido su posición en 5 puestos en PHP (en relación al último mes)
Gráfica de PHP

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

Publicado por José Carlos (15 intervenciones) el 19/08/2019 15:17:08
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--=====================================

COOKIE JQUERY RESPONSIVE INCLUDES ASIDE

======================================-->
<script src="<?php echo $url; ?>views/js/jquery.cookie.js"></script>
<script type="text/javascript">
    function setScreenHWCookie() {
        var resolucion = $( window ).width();
        $.cookie('ancho',resolucion);
 
        return true;
    }
    setScreenHWCookie();
</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.

1
2
3
4
5
6
7
8
9
<?php
if($_COOKIE['ancho'] <= 767){
    //echo "No cargo includes";

    $cargarInclude = 0;
}
else{
    //echo "Si cargo includes";

    $cargarInclude = 1;
}?>

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:

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

}
?>

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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar