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

Question

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

21 ott 2013, 16:51:35

Visualizzazioni: 20K

Voti: 31

È possibile utilizzare wp_localize_script() per creare variabili js globali senza uno specifico handle di script che possano essere accessibili da tutti i file js, anche se gli script js non sono accodati correttamente utilizzando wp_enqueue_script?

Questo è il codice che sto utilizzando che crea una variabile per l'handle 'ajaxscript', quindi non posso accedere all'oggetto 'ajaxobject' in un file js che viene incluso direttamente nell'header.php tramite <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' )
    )
);

Subharanjan

1.59K

wp enqueue script wp-localize-script

Commenti

Basta aggiungere il tuo JS inline all'interno del tema. Questo è esattamente ciò che fa wp_localize_script comunque. Con entrambi i metodi, le variabili sono accessibili da qualsiasi script

onetrickpony

21 ott 2013 16:58:42

Se hai il controllo degli script, come potresti ritrovarti con uno script nell'head che non è stato accodato correttamente? L'idea di wp_localize_script è che stai rendendo disponibili delle variabili al tuo script - che stai caricando correttamente con wp_enqueue_script. In quale caso caricheresti consapevolmente uno script nel file header che necessita di queste variabili, invece di caricarlo tramite wp_enqueue_script?

random_user_name

21 ott 2013 17:15:34

@cale_b : C'è uno script che è già incluso all'interno di header.php e contiene molti script che iniziano a rompere le cose quando provo ad accodare quel file js con wp_enqueue_script. Ho bisogno di fare una chiamata ajax da quel file di script. Quindi invece di rompere la funzionalità e sistemare una cosa alla volta avevo bisogno di una soluzione rapida. Non sono nemmeno sicuro di quale parte del sito si rompa a causa del piccolo cambiamento di 'wp_enqueue_script' :(

Subharanjan

21 ott 2013 17:32:01

Giusto. Come consiglio, scarica Firebug per Firefox e puoi usare la console per monitorare/vedere gli errori JavaScript. Uno strumento indispensabile per il troubleshooting.

random_user_name

21 ott 2013 18:44:52

Tutte le risposte alla domanda

Commenti

Dovresti usare json_encode qui, per esempio: var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;

Weston Ruter

22 ott 2013 23:33:14

Bene, lo aggiungerò da ora in poi

Kumar

23 ott 2013 08:40:17

Puoi esportare qualsiasi dato desideri nell'hook wp_head, come mostrato nelle risposte precedenti. Tuttavia, dovresti utilizzare json_encode per preparare i dati PHP per l'esportazione in JS invece di cercare di 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 di json_encode semplifica il lavoro e previene errori di sintassi accidentali se la tua stringa include virgolette. Ancora più importante, l'uso di json_encode previene attacchi XSS.

Weston Ruter

4.06K

22 ott 2013 23:39:27

Alla fine ho fatto così. Ora funziona !! Grazie @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' );

Subharanjan

1.59K

21 ott 2013 17:35:13

Commenti

Dovresti usare json_encode invece di creare manualmente il JSON.

Weston Ruter

22 ott 2013 23:32:24

Sto usando json_encode ora :) Grazie @WestonRuter !!

Subharanjan

5 apr 2018 16:32:31

Anche se non è il mio lavoro migliore, questo è un altro metodo semplice per inserire dati nella risposta:

<?php

/**
 * Aggiunge dati al contesto globale.
 *
 * @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 window:

<?php

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

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

Questo funzionerà sia per gli script nell'header che nel footer e non si ripeterà.

Erutan409

129

8 nov 2019 23:52:43

Kumar 2.89K · Accepted Answer · 2013-10-21T17:05:26Z

Invece di usare wp_localize_script in quel caso, puoi agganciare le tue variabili JavaScript a wp_head, in modo che siano disponibili 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, per renderlo più a prova di errore, è consigliabile usare wp_json_encode() per i dati.

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
 }