Est-il possible d'utiliser wp_localize_script pour créer des variables JS globales sans descripteur de script spécifique?


27

Pouvons-nous en quelque sorte utiliser wp_localize_script () pour créer des variables js globales sans un descripteur de script spécifique accessible à partir de tous les fichiers js, même si les scripts js ne sont pas mis en file d'attente correctement en utilisant wp_enqueue_script?

C'est le code que j'utilise qui crée varibale pour la poignée 'ajaxscript', donc je ne peux pas accéder à l'objet 'ajaxobject' dans un fichier js qui est inclus dans le header.php directement par <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
Ajoutez simplement votre JS en ligne dans le thème. C'est exactement ce qui se wp_localize_scriptpasse de toute façon. Avec les deux méthodes, les variables sont accessibles à partir de n'importe quel script
onetrickpony

3
Si vous contrôlez les scripts, comment vous retrouveriez-vous avec un script dans la tête qui n'était pas mis en file d'attente correctement? La notion de wp_localize_script est que vous mettez à la disposition de votre script - que vous chargez correctement avec wp_enqueue_script. Dans quel cas chargeriez-vous sciemment un script dans le fichier d'en-tête qui avait besoin de ces variables, plutôt que de le charger via wp_enqueue_script?
cale_b

@cale_b: Il y a un script qui est déjà inclus dans header.php et il contient beaucoup de scripts qui commencent à casser des choses quand j'essaye de mettre en file d'attente ce fichier js par wp_enqueue_script. J'ai besoin de faire un appel ajax à l'intérieur de ce fichier script. Donc, au lieu de casser les fonctionnalités et de les réparer une par une, j'avais besoin d'une solution rapide. Même je ne sais pas quelle partie du site se casse en raison du petit changement de 'wp_enqueue_script' :(
Subharanjan

C'est suffisant. Juste comme conseil, procurez-vous Firebug pour Firefox, et vous pouvez utiliser la console pour regarder / voir les erreurs javascript. Outil précieux pour le dépannage.
cale_b

Réponses:


22

Au lieu d'utiliser wp_localize_script dans ce cas, vous pouvez accrocher vos variables js à wp_head, de cette façon, il serait disponible pour tous les fichiers js comme:

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

Aussi, comme suggéré par @Weston Ruter, vous pouvez coder json les 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
}

4
Vous devriez utiliser json_encodeici, par exemple:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter

Très bien, je vais l'ajouter maintenant
Kumar

12

Vous pouvez exporter toutes les données que vous souhaitez dans le wp_headcrochet, comme le montrent les réponses ci-dessus. Cependant, vous devez utiliser json_encodepour préparer les données PHP pour l'exportation vers JS au lieu d'essayer d'incorporer des valeurs brutes dans les littéraux 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'utilisation json_encodevous facilite la tâche et évite les erreurs de syntaxe accidentelles si votre chaîne contient des guillemets. Encore plus important, l'utilisation d' json_encodeattaques XSS contrarie.


1

J'ai fini par faire ça. Ça fonctionne maintenant !! Merci @ 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
Vous devez utiliser json_encodeau lieu de créer manuellement JSON.
Weston Ruter

J'utilise json_encodemaintenant :) Merci @WestonRuter !!
Subharanjan

0

Bien que ce ne soit pas mon meilleur travail, c'est une autre façon simple d'accomplir la mise en données dans la réponse:

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

}

Ajoutez des données JS au contexte de la fenêtre:

<?php

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

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

Cela fonctionnera pour les scripts d'en-tête ou de pied de page et ne se répétera pas.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.