Este posibil să folosim wp_localize_script pentru a crea variabile JS globale fără un handle specific pentru script?

21 oct. 2013, 16:51:35
Vizualizări: 20K
Voturi: 31

Putem cumva să folosim wp_localize_script() pentru a crea variabile js globale fără un handle specific pentru script care să poată fi accesate din toate fișierele js, chiar dacă scripturile js nu sunt încărcate corect folosind wp_enqueue_script?

Acesta este codul pe care îl folosesc care creează variabila pentru handle-ul 'ajaxscript', astfel că nu pot accesa obiectul 'ajaxobject' într-un fișier js care este inclus direct în header.php prin <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
Comentarii

Pur și simplu adaugă JS inline în interiorul temei. Exact asta face wp_localize_script oricum. Cu ambele metode, variabilele sunt accesibile din orice script

onetrickpony onetrickpony
21 oct. 2013 16:58:42

Dacă ai control asupra scripturilor, cum ai ajunge să ai un script în head care nu a fost încărcat corect? Ideea din spatele wp_localize_script este să faci disponibile variabile pentru scriptul tău - pe care îl încarci corect cu wp_enqueue_script. În ce caz ai încărca intenționat un script în fișierul header care are nevoie de aceste variabile, în loc să-l încarci prin wp_enqueue_script?

random_user_name random_user_name
21 oct. 2013 17:15:34

@cale_b : Există un script care este deja inclus în header.php și conține multe scripturi care încep să creeze probleme când încerc să încarc acel fișier js prin wp_enqueue_script. Am nevoie să fac un apel ajax din interiorul acelui fișier script. Așa că în loc să stric funcționalitatea și să repar unul câte unul, aveam nevoie de o soluție rapidă. Nici măcar nu sunt sigur care parte a site-ului se strică din cauza micii modificări de 'wp_enqueue_script' :(

Subharanjan Subharanjan
21 oct. 2013 17:32:01

Corect. Ca o sugestie, instalează Firebug pentru Firefox, și poți folosi consola pentru a monitoriza / vedea erorile JavaScript. Unealtă de neprețuit pentru depanare.

random_user_name random_user_name
21 oct. 2013 18:44:52
Toate răspunsurile la întrebare 4
2
28

În loc să folosești wp_localize_script în acest caz, poți atașa variabilele tale JS la wp_head, astfel încât să fie disponibile pentru toate fișierele JS astfel:

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

De asemenea, pentru a fi mai sigur, este recomandat să folosești wp_json_encode() pentru date.

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
Comentarii

Ar trebui să folosești json_encode aici, de exemplu: var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;

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

Bine, o voi adăuga de acum înainte

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

Puteți exporta orice date doriți în hook-ul wp_head, așa cum arată răspunsurile de mai sus. Totuși, ar trebui să folosiți json_encode pentru a pregăti datele PHP pentru exportul în JS, în loc să încercați să introduceți valori brute în literali 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' )

Folosirea json_encode vă face viața mai ușoară și previne erori de sintaxă accidentale dacă șirul dumneavoastră include ghilimele. Chiar mai important, folosirea json_encode blochează atacurile XSS.

22 oct. 2013 23:39:27
2

Am ajuns să fac asta. Acum funcționează!! Mulțumesc @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' );
21 oct. 2013 17:35:13
Comentarii

Ar trebui să folosești json_encode în loc să creezi manual JSON.

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

Acum folosesc json_encode :) Mulțumesc @WestonRuter !!

Subharanjan Subharanjan
5 apr. 2018 16:32:31
0

Deși aceasta nu este cea mai bună lucrare a mea, este un alt mod simplu de a adăuga date în răspuns:

<?php

/**
 * Adaugă date în contextul 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;

}

Adaugă date JavaScript în contextul window:

<?php

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

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

Această funcție va funcționa atât pentru scripturile din header cât și pentru cele din footer și nu se va repeta.

8 nov. 2019 23:52:43