是否可以使用wp_localize_script在没有特定脚本句柄的情况下创建全局JS变量?


27

我们可以通过某种方式使用wp_localize_script()创建全局js变量而没有可以从所有js文件访问的特定脚本句柄,即使未使用wp_enqueue_script正确地将js脚本排入队列吗?

这是我正在使用的代码,用于为“ ajaxscript”句柄创建变量,因此我无法访问js文件中的对象“ ajaxobject”,该文件直接包含在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无论如何,这就是事实。使用这两种方法,都可以从任何脚本访问变量
onetrickpony13年

3
如果您控制这些脚本,那么您将如何处理头部未正确排队的脚本?wp_localize_script的概念是使您可以使用自己的脚本-您正在使用wp_enqueue_script正确加载该脚本。在哪种情况下,您会故意在需要这些变量的头文件中加载脚本,而不是通过wp_enqueue_script加载脚本?
cale_b 2013年

@cale_b:header.php中已经包含一个脚本,并且其中包含许多脚本,当我尝试通过wp_enqueue_script将该js文件放入队列时,这些脚本开始中断工作。我需要从该脚本文件中进行ajax调用。因此,与其破坏功能并一一修复,我需要一个快速的解决方案。甚至我也不知道网站的哪一部分会因为'wp_enqueue_script'的微小变化而中断:(
Subharanjan 2013年

很公平。提示,获取适用于Firefox的Firebug,您可以使用控制台观看/查看javascript错误。故障排除的宝贵工具。
cale_b

Answers:


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" ) ); ?>;
Weston Ruter

好吧,我现在将其添加
Kumar,

12

您可以导出wp_head挂钩中所需的任何数据,如上面的答案所示。但是,您应该json_encode准备用于导出到JS的PHP数据,而不是尝试将原始值嵌入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!
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"]');`

这将适用于页眉脚本或页脚脚本,并且不会重复自己。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.