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

27

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

Это код, который я использую, который создает varibale для дескриптора «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
источник
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_encodeXSS-атак.

Уэстон Рутер
источник
1

Я закончил тем, что делал это. Теперь работает !! Спасибо @ точка1

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
источник
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"]');`

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

Erutan409
источник