wp_localize_script를 사용하여 특정 스크립트 핸들없이 전역 JS 변수를 작성할 수 있습니까?


27

어떻게 wp_localize_script ()를 사용하여 wp_enqueue_script를 사용하여 js 스크립트가 올바르게 대기열에 포함되지 않은 경우에도 모든 js 파일에서 액세스 할 수있는 특정 스크립트 핸들없이 전역 js 변수를 만들 수 있습니까?

이것은 'ajaxscript'핸들에 대한 varibale을 생성하는 데 사용하는 코드이므로 header.php에 직접 포함되어있는 js 파일에서 'ajaxobject'객체에 액세스 할 수 없습니다 <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
테마 안에 인라인 JS를 추가하기 만하면됩니다. wp_localize_script어쨌든 그것은 정확히 무엇입니까 . 두 가지 방법으로, 변수는 모든 스크립트에서 액세스 할 수 있습니다
onetrickpony

3
스크립트를 제어 할 수 있다면 어떻게 헤드에 스크립트가 제대로 포함되지 않았을까요? wp_localize_script의 개념은 wp_enqueue_script로 올바르게로드하는 스크립트에서 사용할 수 있다는 것입니다. wp_enqueue_script를 통해로드하지 않고 이러한 변수가 필요한 헤더 파일에 스크립트를 의도적으로로드 하시겠습니까?
cale_b

@cale_b : header.php 안에 이미 포함 된 스크립트가 있으며 wp_enqueue_script로 해당 js 파일을 대기열에 넣을 때 문제를 일으키기 시작하는 많은 스크립트가 포함되어 있습니다. 해당 스크립트 파일에서 ajax를 호출해야합니다. 따라서 기능을 중단하고 하나씩 수정하는 대신 빠른 솔루션이 필요했습니다. 'wp_enqueue_script'의 작은 변경으로 인해 사이트의 어느 부분이 중단되는지 확실하지 않습니다. (
Subharanjan

충분합니다. 팁으로 Firefox 용 Firebug를 다운로드하면 콘솔을 사용하여 자바 스크립트 오류를 ​​보거나 볼 수 있습니다. 문제 해결을위한 소중한 도구입니다.
cale_b

답변:


22

이 경우 wp_localize_script를 사용하는 대신 wp_head에서 js 변수를 연결하면 다음과 같은 모든 js 파일에서 사용할 수 있습니다.

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

@Weston Ruter가 제안한 것처럼 변수를 json 인코딩 할 수 있습니다.

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
당신은 사용해야합니다 json_encode예를 들어, 여기에 :var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
웨스턴 Ruter

좋아, 지금 추가하겠습니다
Kumar

12

wp_head위의 답변과 같이 후크에 원하는 모든 데이터를 내보낼 수 있습니다 . 그러나 json_encode원시 값을 JS 리터럴에 포함시키는 대신 JS로 내보내기 위해 PHP 데이터를 준비하는 데 사용해야 합니다.

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

사용 json_encode하면 문자열을 쉽게 사용할 수 있으며 문자열에 따옴표가 있으면 실수로 구문 오류가 발생하지 않습니다. 더 중요한 것은 json_encodeXSS 공격 을 막는 것입니다.


1

나는 이것을 끝내었다. 지금 작동합니다! 감사합니다 @ 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
json_encodeJSON을 수동으로 만드는 대신 사용해야합니다 .
Weston Ruter

나는 json_encode지금 사용하고 있습니다 :) 감사합니다 @WestonRuter !!
Subharanjan

0

이것이 내 최고의 작품은 아니지만 응답에 데이터를 넣는 또 다른 간단한 방법입니다.

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

}

창 컨텍스트에 JS 데이터를 추가하십시오.

<?php

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

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

이것은 머리글 스크립트 나 바닥 글 스크립트에서 작동하며 반복되지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.