es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cargando div desde archivo html usando jQuery bajo Gutenberg

Sé que se han hecho muchas preguntas similares y las he escrutado para ver si podía encontrar una solución a este problema muy simple. Como podrán adivinar, soy un principiante extremo en js, así que por favor perdónenme si esta es una pregunta muy tonta.

En mi página principal de WordPress, estoy tratando de cargar un iframe dentro de un div desde un archivo html separado (que también vive en mi servidor). Básicamente estoy haciendo esto para asegurarme de que una lista de reproducción de Spotify embebida no sea lo primero que indexe Google cuando rastree mi sitio (ahora ha decidido que la lista de canciones de esa lista de reproducción es una descripción más apropiada para mi sitio que la descripción meta o cualquier otro texto en el sitio). Espero que al cargar el iframe desde un html externo usando window.load, sólo sea rastreado al final del proceso, y por lo tanto sea priorizado de nuevo por Google (con el beneficio añadido de que cualquier tiempo de carga lento de Spotify sólo ocurrirá después de que el resto de la página se haya cargado).

Usando métodos que encontré aquí en stackoverflow creé un archivo html que no tiene más que el código de iframe generado por Spotify:

<iframe src="https://open.spotify.com/embed/playlist/2JVOQhDOZlNSRGw73rl3J9?theme=0" width="100%" height="260" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Luego, en la cabecera de mi índice de WordPress, he incluido el siguiente javascript:

jQuery(window).load(function () {
      $('#spembed').load("http://www.palmsout.net/spotifyindex.html")
  });

Finalmente, he creado un div vacío en mi página principal con el id “spembed”:

<div id="spembed"></div>

Esperaba que este método reemplazara el contenido vacío en el div con el iframe en Spotifyindex.html, pero parece que no está funcionando. El div sigue representando en blanco y no veo ningún error de consola que se refiera al código que estoy usando (aunque de nuevo, soy un verdadero principiante, así que puede que esté entendiendo mal lo que estoy viendo en la consola). Estoy seguro de que me falta algo realmente elemental aquí, pero no puedo entender qué es.

Si alguien pudiera ayudarme, lo agradecería. Y si alguien tiene alguna idea sobre cómo esto podría ayudarme con mi problema de búsqueda de Google (o mejores soluciones, etc.), estoy todo oídos.

Gracias.

PD: Ya he encolado jQuery utilizando el siguiente código, pero no puedo conseguir una respuesta directa sobre si realmente necesito hacer esto.

function theme_scripts() {
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'theme_scripts');
Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Cargando un iframe dentro de un div usando JavaScript

    El usuario está tratando de cargar un iframe dentro de un div desde un archivo HTML separado en su página de índice de WordPress. Lo está haciendo para asegurarse de que una lista de reproducción de Spotify incrustada no sea lo primero indexado por Google cuando rastrea su sitio. Espera que al cargar el iframe desde un HTML externo usando window.load, solo se rastree al final del proceso y, por lo tanto, Google lo priorice nuevamente.

    Para hacer esto, el usuario generó un archivo HTML que contiene solo el código iframe generado por Spotify y luego incluyó el siguiente JavaScript en la cabecera de su índice de WordPress:

    jQuery(window).load(function () {
      $('#spembed').load("http://www.palmsout.net/spotifyindex.html")
    });
    

    Finalmente, creó un div vacío en su página principal con el id “spembed”. Sin embargo, este método no reemplazó el contenido vacío en el div con el iframe en spotifyindex.html, y el div se renderizó en blanco.

    Es posible que el código no esté funcionando porque la biblioteca jQuery podría no haber sido correctamente encolada. El usuario encoló jQuery usando el siguiente código:

    function theme_scripts() {
      wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'theme_scripts');
    

    Sin embargo, no está claro si jQuery es realmente necesario para que funcione este código específico.

    En general, se recomienda que el usuario verifique su código y se asegure de que todas las bibliotecas necesarias estén correctamente encoladas. También puede considerar buscar ayuda adicional de un desarrollador más experimentado.

Comments are closed.