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' )
    )
);
Subharanjan
sumber
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
}
Kumar
sumber
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.

Weston Ruter
sumber
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' );
Subharanjan
sumber
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.

Erutan409
sumber