¿Es posible usar wp_localize_script para crear variables JS globales sin un identificador de script específico?

21 oct 2013, 16:51:35
Vistas: 20K
Votos: 31

¿Existe alguna forma de usar wp_localize_script() para crear variables js globales sin un identificador de script específico que puedan ser accedidas desde todos los archivos js, incluso si los scripts js no están correctamente encolados usando wp_enqueue_script?

Este es el código que estoy usando que crea una variable para el identificador 'ajaxscript', por lo que no puedo acceder al objeto 'ajaxobject' en un archivo js que está siendo incluido directamente en el header.php mediante <script src="xxx" .... />

wp_register_script( 'ajaxscript', get_bloginfo( 'template_url' ) . '/js/ajaxscript.js', array(), $version );
wp_enqueue_script( 'ajaxscript' );
wp_localize_script( 'ajaxscript', 'ajaxobject',
    array( 
        'ajaxurl'   => admin_url( 'admin-ajax.php' ),
        'ajaxnonce' => wp_create_nonce( 'itr_ajax_nonce' )
    )
);
4
Comentarios

Simplemente añade tu JS en línea dentro del tema. Eso es exactamente lo que hace wp_localize_script de todos modos. Con ambos métodos, las variables son accesibles desde cualquier script

onetrickpony onetrickpony
21 oct 2013 16:58:42

Si tienes control sobre los scripts, ¿cómo terminarías con un script en el head que no se encoló correctamente? La idea de wp_localize_script es que estás haciendo disponible para tu script - que estás cargando correctamente con wp_enqueue_script. ¿En qué caso cargarías intencionalmente un script en el archivo header que necesite estas variables, en lugar de cargarlo a través de wp_enqueue_script?

random_user_name random_user_name
21 oct 2013 17:15:34

@cale_b : Hay un script que ya está incluido dentro de header.php y contiene muchos scripts que comienzan a romper cosas cuando intento encolar ese archivo js con wp_enqueue_script. Necesito hacer una llamada ajax desde ese archivo de script. Así que en lugar de romper la funcionalidad y arreglar una por una, necesitaba una solución rápida. Incluso no estoy seguro de qué parte del sitio se rompe debido al pequeño cambio de 'wp_enqueue_script' :(

Subharanjan Subharanjan
21 oct 2013 17:32:01

Entendido. Como consejo, instala Firebug para Firefox, y puedes usar la consola para monitorear/ver errores de JavaScript. Una herramienta invaluable para solucionar problemas.

random_user_name random_user_name
21 oct 2013 18:44:52
Todas las respuestas a la pregunta 4
2
28

En lugar de usar wp_localize_script en ese caso, puedes enganchar tus variables JavaScript en wp_head, de esa manera estarán disponibles para todos los archivos JS. Por ejemplo:

function my_js_variables(){ ?>
      <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajaxnonce = '<?php echo wp_create_nonce( "itr_ajax_nonce" ); ?>';
      </script><?php
}
add_action ( 'wp_head', 'my_js_variables' )

Además, para hacerlo más robusto ante errores, es recomendable usar wp_json_encode() para los datos.

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo wp_json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo wp_json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo wp_json_encode( 
       array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) 
    ); ?>
  </script>
  <?php
 }
21 oct 2013 17:05:26
Comentarios

Deberías usar json_encode aquí, por ejemplo: var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;

Weston Ruter Weston Ruter
22 oct 2013 23:33:14

Bien, lo agregaré a partir de ahora

Kumar Kumar
23 oct 2013 08:40:17
0
14

Puedes exportar cualquier dato que desees en el hook wp_head, como muestran las respuestas anteriores. Sin embargo, deberías usar json_encode para preparar los datos PHP para exportarlos a JS en lugar de intentar incrustar valores crudos en literales JS:

function my_js_variables(){
    ?>
    <script>
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ) ?>;
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ) ?>;
    var myarray = <?php echo json_encode( array( 
        'food' => 'bard',
        'bard' => false,
        'quux' => array( 1, 2, 3, ),
    ) ) ?>;
    </script>
    <?php
}
add_action ( 'wp_head', 'my_js_variables' )

Usar json_encode te facilita el trabajo y evita errores de sintaxis accidentales si tu cadena incluye comillas. Más importante aún, usar json_encode previene ataques XSS.

22 oct 2013 23:39:27
2

Terminé haciendo esto. ¡Ahora funciona! Gracias @dot1

function itr_global_js_vars() {
    // Crear variables globales de JavaScript para AJAX
    $ajax_url = 'var itrajaxobject = {"itrajaxurl":"'. admin_url( 'admin-ajax.php' ) .'", "itrajaxnonce":"'. wp_create_nonce( 'itr_ajax_nonce' ) .'"};';
    echo "<script type='text/javascript'>\n";
    echo "/* <![CDATA[ */\n";
    echo $ajax_url;
    echo "\n/* ]]> */\n";
    echo "</script>\n";
}
// Añadir la función al head de WordPress
add_action( 'wp_head', 'itr_global_js_vars' );
21 oct 2013 17:35:13
Comentarios

Deberías usar json_encode en lugar de crear JSON manualmente.

Weston Ruter Weston Ruter
22 oct 2013 23:32:24

Ahora estoy usando json_encode :) ¡Gracias @WestonRuter!

Subharanjan Subharanjan
5 abr 2018 16:32:31
0

Aunque este no es mi mejor trabajo, es otra forma sencilla de lograr incluir datos en la respuesta:

<?php

/**
 * Añade datos al contexto global.
 *
 * @param string $name
 * @param mixed $value
 * @return mixed|array
 */
function global_js($name = null, $value = null)
{

    static $attached = false;
    static $variables = [];

    if (! $attached) {

        $provide = function () use (&$variables) {

            if (! empty($variables)) {

                echo("<script type=\"text/javascript\">\n\n");

                foreach ($variables as $name => $value) {

                    echo("    window['$name'] = JSON.parse('".json_encode($value)."');\n");
                    unset($variables[$name]);

                }

                echo("\n</script>\n");

            }

        };

        add_action('wp_print_scripts', $provide, 0);
        add_action('wp_print_footer_scripts', $provide, 0);

        $attached = true;

    }

    if (is_null($name) && is_null($value)) {
        return $variables;
    }

    return $variables[$name] = $value;

}

Añade algunos datos JS al contexto de window:

<?php

global_js('fruits', ['apple', 'peach']);

// produce: `window['fruits'] = JSON.parse('["apple", "peach"]');`

Esto funcionará tanto para los scripts del encabezado como para los del pie de página y no se repetirá a sí mismo.

8 nov 2019 23:52:43