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


27

¿Podemos usar de alguna manera wp_localize_script () para crear variables js globales sin un identificador de script específico al que se pueda acceder desde todos los archivos js, incluso si los scripts js no se ponen en cola correctamente usando wp_enqueue_script?

Este es el código que estoy usando que crea varibale para el identificador 'ajaxscript', por lo que no puedo acceder al objeto 'ajaxobject' en un archivo js que está siendo incluido en el header.php directamente por <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' )
    )
);

55
Simplemente agregue su JS en línea dentro del tema. Eso es exactamente lo que wp_localize_scripthace de todos modos. Con ambos métodos, se puede acceder a las variables desde cualquier script
onetrickpony

3
Si tiene el control de los guiones, ¿cómo terminaría con un guión en la cabeza que no se colocó correctamente en cola? La noción de wp_localize_script es que está poniendo a disposición su script, que está cargando correctamente con wp_enqueue_script. ¿En qué caso cargaría a sabiendas el script en el archivo de encabezado que necesitaba estas variables, en lugar de cargarlo a través de wp_enqueue_script?
cale_b

@cale_b: Hay una secuencia de comandos que ya está incluida dentro de header.php y contiene muchas secuencias de comandos que comienzan a romper cosas cuando trato de poner ese archivo js en wp_enqueue_script. Necesito hacer una llamada ajax desde ese archivo de script. Entonces, en lugar de romper la funcionalidad y arreglar uno por uno, 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

Lo suficientemente justo. Solo como un consejo, obtenga Firebug para Firefox, y puede usar la consola para ver / ver errores de JavaScript. Herramienta invaluable para la resolución de problemas.
cale_b

Respuestas:


22

En lugar de usar wp_localize_script en ese caso, puede conectar sus variables js en wp_head, de esa manera estaría disponible para todos los archivos js como:

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' )

También como lo sugiere @Weston Ruter, puede codificar json las variables:

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    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( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}

44
Debe usar json_encodeaquí, por ejemplo:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter

Bien, lo agregaré ahora en adelante
Kumar

12

Puede exportar cualquier dato que desee en el wp_headgancho, como muestran las respuestas anteriores. Sin embargo, debe usar json_encodepara preparar los datos PHP para exportar a JS en lugar de intentar incrustar valores sin procesar 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' )

El uso lo json_encodehace más fácil para usted y evita errores de sintaxis accidentales si su cadena incluye comillas. Aún más importante, el uso de json_encodefrustra los ataques XSS.


1

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

function itr_global_js_vars() {
    $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";
}
add_action( 'wp_head', 'itr_global_js_vars' );

8
Debería usar en json_encodelugar de crear manualmente JSON.
Weston Ruter

Estoy usando json_encodeahora :) Gracias @WestonRuter !!
Subharanjan

0

Si bien este no es mi mejor trabajo, esta es otra forma directa de lograr poner datos en la respuesta:

<?php

/**
 * Add data to global context.
 *
 * @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;

}

Agregue algunos datos JS al contexto de la ventana:

<?php

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

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

Esto funcionará para los guiones de encabezado o de pie de página y no se repetirá.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.