É possível usar wp_localize_script para criar variáveis ​​JS globais sem um identificador de script específico?

27

De alguma forma, podemos usar wp_localize_script () para criar variáveis ​​js globais sem um identificador de script específico que possa ser acessado de todos os arquivos js, mesmo que os scripts js não sejam enfileirados adequadamente usando wp_enqueue_script?

Este é o código que estou usando, que cria varibale para o identificador 'ajaxscript', portanto, não consigo acessar o objeto 'ajaxobject' em um arquivo js que está sendo incluído no header.php diretamente por <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
fonte
5
Basta adicionar seu JS embutido dentro do tema. É exatamente o que wp_localize_scriptfaz de qualquer maneira. Com ambos os métodos, as variáveis são acessíveis a partir de qualquer script
onetrickpony
3
Se você está no controle dos scripts, como você terminaria com um script na cabeça que não foi enfileirado corretamente? A noção de wp_localize_script é que você está disponibilizando para o seu script - que você está carregando adequadamente com wp_enqueue_script. Em que caso você carregaria conscientemente o script no arquivo de cabeçalho que precisava dessas variáveis, em vez de carregá-lo através do wp_enqueue_script?
Cale_b 21/10
@cale_b: Existe um script que já está incluído no header.php e contém muitos scripts que começam a quebrar as coisas quando tento enfileirar o arquivo js por wp_enqueue_script. Eu preciso fazer uma chamada ajax dentro desse arquivo de script. Então, em vez de quebrar a funcionalidade e corrigir uma por uma, eu precisava de uma solução rápida. Mesmo que eu não estou certo de que parte dos breaks local por causa da pequena mudança de 'wp_enqueue_script' :(
Subharanjan
Justo. Apenas como uma dica, obtenha o Firebug for Firefox e você pode usar o console para assistir / ver erros de javascript. Ferramenta inestimável para solução de problemas.
Cout_b

Respostas:

22

Em vez de usar wp_localize_script nesse caso, você pode conectar suas variáveis ​​js em wp_head, para que estejam disponíveis para todos os arquivos js, como:

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

Também como sugerido por @Weston Ruter, você pode json codificar as variáveis:

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
}
Kumar
fonte
4
Você deve usar json_encodeaqui, por exemplo:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter
Tudo bem, eu vou adicioná-lo agora em diante
Kumar
12

Você pode exportar todos os dados que desejar no wp_headgancho, como mostram as respostas acima. No entanto, você deve usar json_encodepara preparar os dados PHP para exportar para JS em vez de tentar incorporar valores brutos em literais 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' )

O uso json_encodefacilita a si mesmo e evita erros acidentais de sintaxe se a sua string incluir aspas. Ainda mais importante, o uso de json_encodeataques XSS impedidos.

Weston Ruter
fonte
1

Acabei fazendo isso. Funciona agora !! Obrigado @ 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
fonte
8
Você deve usar em json_encodevez de criar JSON manualmente.
precisa
Estou usando json_encodeagora :) Obrigado @WestonRuter !!
Subharanjan
0

Embora este não seja o meu melhor trabalho, esta é outra maneira direta de realizar a inserção de dados na resposta:

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

}

Adicione alguns dados JS ao contexto da janela:

<?php

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

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

Isso funcionará para os scripts de cabeçalho ou rodapé e não se repetirá.

Erutan409
fonte