Чи можна використовувати wp_localize_script для створення глобальних змінних JS без конкретної ручки сценарію?


27

Чи можемо ми якось використовувати wp_localize_script () для створення глобальних js-змінних без конкретної ручки сценарію, до якої можна отримати доступ з усіх файлів js, навіть якщо сценарії js не виконані належним чином за допомогою wp_enqueue_script?

Цей код, який я використовую, створює варіабель для обробки "ajaxscript", тому я не можу отримати доступ до об'єкта "ajaxobject" у файлі js, який безпосередньо включається до header.php <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, і він містить безліч скриптів, які починають ламати речі, коли я намагаюся запхнути цей js файл wp_enqueue_script. Мені потрібно здійснити виклик Ajax всередині цього файлу сценарію. Тому замість того, щоб порушувати функціональність і виправляти одну за одною, мені було потрібно швидке рішення. Навіть я не впевнений, яка частина сайту зламається через невелику зміну 'wp_enqueue_script' :(
Subharanjan

Досить справедливо. Як підказка, отримайте Firebug для Firefox, і ви можете використовувати консоль для перегляду / перегляду помилок javascript. Безцінний інструмент для усунення несправностей.
cale_b

Відповіді:


22

Замість використання wp_localize_script у такому випадку, ви можете підключити свої js-змінні на wp_head, таким чином він буде доступний для всіх 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" ) ); ?>;
Вестон Рутер

Чудово, я додам це зараз
Кумар

12

Ви можете експортувати будь-які потрібні дані на wp_headгачок, як показано вище. Однак вам слід використовувати json_encodeдля підготовки даних PHP для експорту в JS замість того, щоб намагатися вставляти необроблені значення в літерали 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' )

Використання json_encodeполегшує роботу із собою, а також запобігає випадковим помилкам синтаксису, якщо у вашому рядку містяться будь-які лапки. Ще важливіше, використовуючи json_encodeперешкоди для атаки XSS.


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_encodeзамість того, щоб створювати JSON вручну.
Вестон Рутер

Я зараз використовую json_encode:) Дякую @WestonRuter !!
Субхараджан

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"]');`

Це буде працювати як для заголовків, так і для колонтитулів, і не повториться.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.