Apakah mungkin menggunakan wp_localize_script untuk membuat variabel JS global tanpa pegangan skrip tertentu?


27

Bisakah kita entah bagaimana menggunakan wp_localize_script () untuk membuat variabel global js tanpa pegangan skrip tertentu yang dapat diakses dari semua file js, bahkan jika skrip js tidak diuraikan dengan benar dengan menggunakan wp_enqueue_script?

Ini adalah kode yang saya gunakan yang menciptakan varibale untuk pegangan 'ajaxscript', jadi saya tidak dapat mengakses objek 'ajaxobject' dalam file js yang dimasukkan dalam header.php langsung oleh <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
Cukup tambahkan inline JS Anda di dalam tema. Lagipula itulah yang sebenarnya wp_localize_scriptterjadi. Dengan kedua metode, variabel dapat diakses dari skrip apa pun
onetrickpony

3
Jika Anda mengendalikan skrip, bagaimana Anda akan mendapatkan skrip di kepala yang tidak diuraikan dengan benar? Gagasan wp_localize_script adalah bahwa Anda membuat tersedia untuk skrip Anda - yang Anda muat dengan benar dengan wp_enqueue_script. Dalam hal apa Anda dengan sadar memuat skrip dalam file header yang membutuhkan variabel-variabel ini, daripada memuatnya melalui wp_enqueue_script?
cale_b

@cale_b: Ada skrip yang sudah termasuk di dalam header.php dan itu berisi banyak skrip yang mulai memecah hal-hal ketika saya mencoba untuk enqueue file js oleh wp_enqueue_script. Saya perlu membuat panggilan ajax di dalam dari file skrip itu. Jadi, alih-alih merusak fungsionalitas dan memperbaikinya satu per satu, saya membutuhkan solusi cepat. Bahkan saya tidak yakin bagian mana dari situs yang rusak karena perubahan kecil 'wp_enqueue_script' :(
Subharanjan

Cukup adil. Sama seperti tip, dapatkan Firebug untuk Firefox, dan Anda dapat menggunakan konsol untuk menonton / melihat kesalahan javascript. Alat yang sangat berharga untuk pemecahan masalah.
cale_b

Jawaban:


22

Alih-alih menggunakan wp_localize_script dalam kasus itu, Anda dapat mengaitkan variabel js Anda di wp_head, dengan cara itu akan tersedia untuk semua file js seperti:

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

Juga seperti yang disarankan oleh @Weston Ruter, Anda dapat mengkode variabel:

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
Anda harus menggunakan di json_encodesini, misalnya:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter

Baik, saya akan menambahkannya sekarang dan seterusnya
Kumar

12

Anda dapat mengekspor data apa pun yang Anda inginkan di wp_headhook, seperti yang ditunjukkan oleh jawaban di atas. Namun, Anda harus menggunakan json_encodeuntuk menyiapkan data PHP untuk diekspor ke JS alih-alih mencoba menanamkan nilai mentah ke dalam literal 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' )

Menggunakan json_encodemembuatnya lebih mudah pada diri Anda sendiri, dan itu mencegah kesalahan sintaksis tidak disengaja jika string Anda menyertakan tanda kutip. Yang lebih penting, menggunakan json_encodeserangan XSS.


1

Saya akhirnya melakukan ini. Berhasil sekarang !! Terima kasih @ 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
Anda harus menggunakan json_encodedaripada membuat JSON secara manual.
Weston Ruter

Saya menggunakan json_encodesekarang :) Terima kasih @WestonRuter !!
Subharanjan

0

Meskipun ini bukan pekerjaan terbaik saya, ini adalah cara langsung untuk menyelesaikan memasukkan data ke dalam respons:

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

}

Tambahkan beberapa data JS ke konteks jendela:

<?php

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

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

Ini akan berfungsi untuk skrip header atau skrip footer dan tidak akan terulang.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.