3

Se que esta pregunta se ha varias veces en el foro pero no he logrado el resultado que busco con lo encontrado.

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:

<!-- @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.

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

EDITO PARA AÑADIR NUEVA OPCIÓN

Hola de nuevo.

Creo que casi estoy consiguiendo una opción que me puede servir, donde nada más cargar la web hago el script 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.

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

<?php
$respuesta = $_POST["resolucion"];
echo $respuesta;
?>

Opción 2 en un mismo archivo.

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

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

2
  • 4
    Tienes un problema de concepto. Ten en cuenta que PHP es un lenguaje de lado de Servidor mientras que JavsaScript, como lo estás usando es de lado de cliente. Esto implica que para cuando tú estás ejecutando ese código JavaScript, todo tu PHP ya se ha ejecutado y los imports ya se han resuelto. Así que no podrás implementar la solución que planteas. Te recomiendo que explores otras vías. Commented el 12 jul. 2019 a las 12:58
  • Hola Fernando, acabo de añadir otra opción, no se si será posible hacerlo así pero si logro pasar la variable de jquery a php quizás me funcionaría perfecto. Gracias un saludo. Commented el 13 ago. 2019 a las 11:10

4 respuestas 4

2

Lo que creo que quieres hacer, es relativamente sencillo aunque algo largo, dependiendo de cómo lo hagas.

Una forma sería sencilla sería que te creases tantos scripts de php como códigos html quieras meter en la página.

"views/modules/modulo1.php"
"views/modules/modulo2.php"
"views/modules/moduloX.php"

Posteriormente, mediante ajax, recuperas los módulos del servidor tal y como lo has hecho en la Opción 1 y añades la respuesta al código html de la página

$(document).ready(function() {
var width = window.innerWidth;
var resolucion = $(window).width();

if (resolucion <= 767) {
    let ajax = new XMLHttpRequest();
    ajax.open("POST", "./views/modules/modulo1.php");
    ajax.send();

    ajax.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let elementoAntesDelAsside = document.getElementByID("ID_del_elemento");
            elementoAntesDelAsside.insertAdjacentHTML("afterend", this.responseText);
        } else {
            console.log("Error en la llamada AJAX.");
        }
    }
};
}

Y si todo está bien debería funcionar (No lo he probado, por lo que puede haber errores de sintaxis, pero el concepto creo que es correcto)

Sin embargo, tal y como te han dicho, con JavaScript no se puede cargar un include de PHP como tal, por lo que es importante entender qué es lo que se está haciendo. Lo que te he mostrado en la liíneas anteriores, lo que hace es enviar un html desde el servidor que posteriormente se añade a tu página gracias a la consulta AJAX que se realiza, esto tiene el problema de que si alguien realiza una consulta con un post a "/views/modules/moduloX.php" le devolverá el mismo html que se devuelve en la consulta AJAX.

Por otro lado, me parece raro que el robot de google no ejecute la media query del css (Que puede ser, no lo he comprobado), pero ya te digo yo que si no ejecuta el css, no creo que vaya a ejecutar JavaScript, por los siguientes motivos:

  • Es más pesado
  • Podría tener algún script malicioso

Espero haberte ayudado, un saludo.

7
  • Hola Pedro, hice algo parecido con un div incluyendo o no los módulos pero al estar como include dentro de template, y este a la vez dentro de index donde se cargan todos los controladores y modelos pues parecía que solo se recargaba por segunda vez y daba error al no tener estos controladores y a la vez en el código fuentes de la página no aparecía, es decir funcionaba pero con errores. ¿Lo que quiero hacer de pasar simplemente el valor de una variable de jquery a php sería posible? Gracias, un saludo. Commented el 13 ago. 2019 a las 21:26
  • 1
    Hola José Carlos, yo creo que lo que quieres no es posible, es decir, es posible si recargas la página, pero no de primeras (Que es lo que creo que quieres) y te explico por qué. JQyery y javascript se ejecutan y se cargan en el navegador una vez que el servidor envía la página, por tanto al ejecutarse cualquier código javascript, el cliente (El navegador) ya tiene la página y la tiene con el formato original, con o sin aside, o con los módulos que sean. Por tanto para enviar esa información al servidor, la página ya se ha tenido que cargar.
    – Pedro
    Commented el 13 ago. 2019 a las 21:35
  • 1
    Por otro lado, no sé donde has puesto el código javascript, la etiqueta <script></script> pero si la has puesto al final, no te va a funcionar bien, tienes que ponerla dento del head. Un saludo.
    – Pedro
    Commented el 13 ago. 2019 a las 21:37
  • 1
    @JoséCarlos-kahlito Genial ! Me alegro :)
    – Pedro
    Commented el 13 ago. 2019 a las 22:12
  • 1
    Creo que lo que intentas hacer no se puede, pero se me ha ocurrido otra idea, te la comento en una nueva respuesta.
    – Pedro
    Commented el 13 ago. 2019 a las 22:23
2

Creo que hay otra posibilidad más sencilla usando javascript:

En primer lugar, desde php cargas la web entera.

A continuación desde JavaScript eliminas el HTML que no deseas mostrar, para ello, debes añadir esto en un tag <script></script> dentro del head.

var width = window.innerWidth;
var resolucion = $(window).width();

if (resolucion <= 767) {
    let elementoaBorrar1 = document.getElementById("elementoaBorrar1 ");
    elementoaBorrar1.parentNode.removeChild(elementoaBorrar1 );
    // Repetir para todos lo elementos que quieras
    ...
}

Lo que hace el código anterior es buscar los elementos que no deseas mostrar y borrarlos antes de que la página cargue en función de si el tamaño de la ventana es el adecuado. De esta manera, en vez de enviar a PHP el tamaño de la ventana, lo que haces es eliminar el contenido antes de que cargue la página.

A ver si esta otra aproximación te va mejor. Un saludo.

Edito

Como estás usando JQuery, creo que se puede simplificar el código.

var width = window.innerWidth;
var resolucion = $(window).width();
$(document).ready(function(){
    if (resolucion <= 767) {
        $("#elementoaBorrar1").remove();
        // Repetir para todos lo elementos que quieras
        ...
    }
}

A ver si con este código funciona, un saludo.

7
  • Hola de nuevo, la verdad es que lo he probado y no elimina dentro del div el contenido que trae el include. Lo he puseto así: <script> var width = window.innerWidth; var resolucion2 = $(window).width(); $(document).ready(function(){ if (resolucion2 <= 767) { let elementoaBorrar1 = document.getElementById("elementoaBorrar1"); elementoaBorrar1.parentNode.removeChild(elementoaBorrar1); console.log("Respuesta de console en template:" + resolucion2); } }); </script> Commented el 13 ago. 2019 a las 23:13
  • Y el id lo llamo o cargo aquí: <div id="elementoaBorrar1"><?php include "modules/aside-izq.php"; ?></div> pero sigue cargando el html del include en resolución pequeña. Commented el 13 ago. 2019 a las 23:13
  • Y resolución 2 es menor de 767? Entiendo que sí no?
    – Pedro
    Commented el 13 ago. 2019 a las 23:43
  • 1
    Tal vez el código anterior falle por alguna cosa, prueba con el que he puesto en jquery a ver si ese va mejor :) Debería funcionar.
    – Pedro
    Commented el 13 ago. 2019 a las 23:54
  • 1
    Es lo que te indiqué en la primera respuesta que te di. Google no ejecuta el código JavaScript. Suerte, un saludo.
    – Pedro
    Commented el 14 ago. 2019 a las 20:41
2

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.

<!--=====================================
        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.

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

<?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 por la ayuda y consejos, saludos.

2

Podrías haber hecho esto es mucho más sencillo.

Primero en tu código php incluir la siguiente línea:

<?php echo "<div id='showInclude'></div>";?>

Y en tu script: (asegurate de no estar cargando el script en un evento onload)

function preloadFunc()
    {
       var w    = $(window).width()
       var h    = $(window).height()
       var res  = w + "x" + h;

      if( res == "768x1024")
      $('include "modules/aside-izq.php').appendTo('#showInclude'); 
    }

window.onpaint = preloadFunc();   
5
  • Hola Abraghon, hice algo parecido en uno de los tantos ejemplos que probé pero como le comentaba a Pedro en uno de los comentarios así al cargarse el include después tengo que volver a cargar controladores etc etc y da varios errores. Si te dijas la diferencia con el ejemplo que he puesto último es que cargo los includes desde php siempre y no de jquery o javascript ya que así me pasa ese error. Gracias por tu sugerencia, saludos. Commented el 19 ago. 2019 a las 23:12
  • @JoséCarlos-kahlito qué error te da?
    – Abraghon
    Commented el 20 ago. 2019 a las 13:47
  • no carga los controladores de entrada ya que estos se cargan en el index de primera hora y de esta manera se cargan los includes sin esa parte con los require o includes principales de la web, es decir que no los reconoce y es como si tuviese que recargar todo eso una vez cargado el php anterior o principal, por lo tanto tendría que hacer una nueva llamada y me genera un errores de carga en php. Además de esa manera no carga el html de los aside en el código fuente mientras que al cargarlos con php si entran directamente. Commented el 20 ago. 2019 a las 15:31
  • A ver intenta con la edición que le hice al codigo.
    – Abraghon
    Commented el 20 ago. 2019 a las 15:48
  • Hola de nuevo Abraghon, probando esta nueva edición de código no va el script, aparte acabo de buscar algo sobre window.onpaint y por lo visto ya está o desaprobado o no funciona correctamente en algunas aplicaciones. stackoverflow.com/questions/23657239/what-is-window-onpaint Aquí sobre Non-standard developer.mozilla.org/en-US/docs/Web/API/Window/onpaint Commented el 21 ago. 2019 a las 9:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.