Có thể sử dụng wp_localize_script để tạo các biến JS toàn cầu mà không cần xử lý tập lệnh cụ thể không?


27

Bằng cách nào đó chúng ta có thể sử dụng wp_localize_script () để tạo các biến js toàn cầu mà không cần xử lý tập lệnh cụ thể có thể được truy cập từ tất cả các tệp js, ngay cả khi các tập lệnh js không được xử lý đúng bằng cách sử dụng wp_enqueue_script?

Đây là mã tôi đang sử dụng để tạo varibale cho xử lý 'ajaxscript', vì vậy tôi không thể truy cập đối tượng 'ajaxobject' trong tệp js được đưa vào tiêu đề.php trực tiếp <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
Đơn giản chỉ cần thêm JS nội tuyến của bạn bên trong chủ đề. Đó chính xác là những gì wp_localize_scriptkhông. Với cả hai phương thức, các biến có thể truy cập được từ bất kỳ tập lệnh nào
onetrickpony

3
Nếu bạn đang kiểm soát các tập lệnh, làm thế nào bạn kết thúc với một tập lệnh trong đầu không được xử lý đúng cách? Khái niệm về wp_localize_script là bạn đang cung cấp cho tập lệnh của mình - mà bạn đang tải đúng cách với wp_enqueue_script. Trong trường hợp nào bạn sẽ cố tình tải tập lệnh trong tệp tiêu đề cần các biến này, thay vì tải tập lệnh qua wp_enqueue_script?
cale_b

@cale_b: Có một tập lệnh đã được bao gồm trong header.php và nó chứa rất nhiều tập lệnh bắt đầu phá vỡ mọi thứ khi tôi cố gắng ghi lại tập tin js đó bằng wp_enqueue_script. Tôi cần thực hiện một cuộc gọi ajax bên trong từ tệp script đó. Vì vậy, thay vì phá vỡ chức năng và sửa từng cái một, tôi cần một giải pháp nhanh chóng. Ngay cả tôi cũng không chắc phần nào của trang bị hỏng vì thay đổi nhỏ của 'wp_enqueue_script' :(
Subharanjan

Đủ công bằng. Chỉ là một mẹo, hãy tải Fireorms cho Firefox và bạn có thể sử dụng bảng điều khiển để xem / xem các lỗi javascript. Công cụ vô giá để xử lý sự cố.
cale_b

Câu trả lời:


22

Thay vì sử dụng wp_localize_script trong trường hợp đó, bạn có thể móc các biến js của mình tại wp_head, theo cách đó nó sẽ có sẵn cho tất cả các tệp js như:

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

Cũng như được đề xuất bởi @Weston Ruter, bạn có thể json mã hóa các biến:

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
Bạn nên sử dụng json_encodeở đây, ví dụ:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter

Tốt thôi, tôi sẽ thêm nó ngay bây giờ
Kumar

12

Bạn có thể xuất bất kỳ dữ liệu nào bạn muốn trong wp_headhook, như các câu trả lời ở trên hiển thị. Tuy nhiên, bạn nên sử dụng json_encodeđể chuẩn bị dữ liệu PHP để xuất sang JS thay vì cố gắng nhúng các giá trị thô vào các ký tự 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' )

Việc sử dụng json_encodegiúp bạn dễ dàng hơn và nó ngăn ngừa các lỗi cú pháp ngẫu nhiên nếu chuỗi của bạn bao gồm bất kỳ dấu ngoặc kép nào. Thậm chí quan trọng hơn, sử dụng json_encodecác cuộc tấn công XSS cản trở.


1

Tôi đã kết thúc việc này. Nó hoạt dộng bây giờ !! Cảm ơn @ 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
Bạn nên sử dụng json_encodethay vì tự tạo JSON.
Weston Ruter

Tôi đang sử dụng json_encodengay bây giờ :) Cảm ơn @WestonRuter !!
Subharanjan

0

Mặc dù đây không phải là công việc tốt nhất của tôi, đây là một cách đơn giản khác để hoàn thành việc đưa dữ liệu vào phản hồi:

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

}

Thêm một số dữ liệu JS vào ngữ cảnh cửa sổ:

<?php

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

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

Điều này sẽ làm việc cho các tập lệnh tiêu đề hoặc tập lệnh chân trang và sẽ không lặp lại.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.