È possibile utilizzare wp_localize_script per creare variabili JS globali senza un handle di script specifico?


27

Possiamo in qualche modo usare wp_localize_script () per creare variabili js globali senza un handle di script specifico a cui è possibile accedere da tutti i file js, anche se gli script js non sono accodati correttamente usando wp_enqueue_script?

Questo è il codice che sto usando che crea varibale per l'handle di "ajaxscript", quindi non posso accedere all'oggetto "ajaxobject" in un file js che viene incluso nell'header direttamente da <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' )
    )
);

5
Aggiungi semplicemente il tuo JS in linea all'interno del tema. Questo è esattamente ciò che wp_localize_scriptfa comunque. Con entrambi i metodi, le variabili sono accessibili da qualsiasi script
onetrickpony,

3
Se hai il controllo degli script, come finiresti con uno script in testa che non è stato accodato correttamente? L'idea di wp_localize_script è che stai rendendo disponibile per il tuo script, che stai caricando correttamente con wp_enqueue_script. In quale caso caricheresti consapevolmente lo script nel file di intestazione che necessitava di queste variabili, anziché caricarlo tramite wp_enqueue_script?
cale_b,

@cale_b: c'è uno script che è già incluso in header.php e contiene molti script che iniziano a rompere le cose quando provo ad accodare quel file js con wp_enqueue_script. Devo effettuare una chiamata Ajax all'interno da quel file di script. Quindi, invece di interrompere la funzionalità e risolvere uno per uno, avevo bisogno di una soluzione rapida. Anche non sono sicuro di quale parte del sito si rompa a causa della piccola modifica di "wp_enqueue_script" :(
Subharanjan,

Giusto. Proprio come un suggerimento, ottieni Firebug per Firefox e puoi usare la console per guardare / vedere errori javascript. Strumento prezioso per la risoluzione dei problemi.
cale_b,

Risposte:


22

Invece di usare wp_localize_script in quel caso, puoi agganciare le tue variabili js su wp_head, in questo modo sarebbe disponibile per tutti i file js come:

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

Inoltre, come suggerito da @Weston Ruter, puoi json codificare le variabili:

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
}

4
Dovresti usare json_encodequi, ad esempio:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter,

Bene, lo aggiungerò ora in poi
Kumar,

12

È possibile esportare tutti i dati desiderati nel wp_headhook, come mostrano le risposte sopra. Tuttavia, dovresti usare json_encodeper preparare i dati PHP per l'esportazione in JS invece di provare a incorporare valori grezzi nei letterali 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' )

L'uso json_encodesemplifica te stesso e previene errori di sintassi accidentali se la stringa include virgolette. Ancora più importante, usando gli json_encodeattacchi XSS di thwarts.


1

Ho finito per farlo. Ora funziona !! Grazie @ punto1

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
È necessario utilizzare json_encodeinvece di creare manualmente JSON.
Weston Ruter,

Sto usando json_encodeora :) Grazie @WestonRuter !!
Subharanjan,

0

Anche se questo non è il mio miglior lavoro, questo è un altro modo semplice per ottenere l'inserimento di dati nella risposta:

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

}

Aggiungi alcuni dati JS al contesto della finestra:

<?php

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

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

Funzionerà con gli script di intestazione o piè di pagina e non si ripeterà.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.