Возможно ли использовать wp_localize_script для создания глобальных JS переменных без привязки к конкретному скрипту?

Question

Возможно ли использовать wp_localize_script для создания глобальных JS переменных без привязки к конкретному скрипту?

21 окт. 2013 г., 16:51:35

Просмотры: 20K

Голосов: 31

Можно ли как-то использовать wp_localize_script() для создания глобальных javascript переменных без привязки к конкретному идентификатору скрипта, чтобы они были доступны во всех 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' )
    )
);

Subharanjan

1.59K

wp enqueue script wp-localize-script

Комментарии

Просто добавьте ваш встроенный JS внутрь темы. Именно это и делает функция wp_localize_script в любом случае. В обоих методах переменные доступны из любого скрипта

onetrickpony

21 окт. 2013 г. 16:58:42

Если вы контролируете скрипты, как может получиться, что скрипт в head не был правильно добавлен через enqueue? Идея wp_localize_script заключается в том, что вы делаете переменные доступными для вашего скрипта - который вы загружаете правильно через wp_enqueue_script. В каком случае вы сознательно загрузите скрипт в header.php, которому нужны эти переменные, вместо загрузки через wp_enqueue_script?

random_user_name

21 окт. 2013 г. 17:15:34

@cale_b : Есть скрипт, который уже включен в header.php, и он содержит множество скриптов, которые начинают ломать функциональность, когда я пытаюсь подключить этот js-файл через wp_enqueue_script. Мне нужно сделать ajax-запрос внутри этого файла скрипта. Поэтому вместо того, чтобы ломать функциональность и исправлять всё по частям, мне нужно было быстрое решение. Я даже не уверен, какая часть сайта перестанет работать из-за небольшого изменения 'wp_enqueue_script' :(

Subharanjan

21 окт. 2013 г. 17:32:01

Справедливо. В качестве подсказки: установите Firebug для Firefox, и вы сможете использовать консоль для отслеживания/просмотра ошибок JavaScript. Незаменимый инструмент для диагностики проблем.

random_user_name

21 окт. 2013 г. 18:44:52

Все ответы на вопрос

Комментарии

Здесь следует использовать json_encode, например: var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;

Weston Ruter

22 окт. 2013 г. 23:33:14

Хорошо, я добавлю это сейчас

Kumar

23 окт. 2013 г. 08:40:17

Вы можете экспортировать любые данные в хуке 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-атак.

Weston Ruter

4.06K

22 окт. 2013 г. 23:39:27

В итоге я сделал так. Теперь это работает !! Спасибо @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

1.59K

21 окт. 2013 г. 17:35:13

Комментарии

Вам следует использовать json_encode вместо ручного создания JSON.

Weston Ruter

22 окт. 2013 г. 23:32:24

Теперь я использую json_encode :) Спасибо @WestonRuter !!

Subharanjan

5 апр. 2018 г. 16:32:31

Хотя это не самая изящная реализация, вот ещё один простой способ передачи данных в ответ:

<?php

/**
 * Добавляет данные в глобальный контекст.
 *
 * @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 данных в контекст window:

<?php

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

// результат: `window['fruits'] = JSON.parse('["apple", "peach"]');`

Это будет работать как для скриптов в шапке, так и в подвале сайта, без дублирования.

Erutan409

129

8 нояб. 2019 г. 23:52:43

Kumar 2.89K · Accepted Answer · 2013-10-21T17:05:26Z

Вместо использования wp_localize_script в данном случае, вы можете подключить свои JavaScript-переменные через 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' )

Также для повышения надежности рекомендуется использовать wp_json_encode() для данных.

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo wp_json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo wp_json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo wp_json_encode( 
       array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) 
    ); ?>
  </script>
  <?php
 }