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

时间：2013-10-21 作者：Subharanjan

我们是否可以使用wp\\u localize\\u script（）创建全局js变量，而不使用特定的脚本句柄，该脚本句柄可以从所有js文件访问，即使js脚本没有使用wp\\u enqueue\\u script正确排队？

这是我正在使用的代码，它为“ajaxscript”句柄创建变量，因此我无法访问包含在标头中的js文件中的对象“ajaxobject”。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\' )
    )
);

4 个回复

最合适的回答,由SO网友:Kumar 整理而成

在这种情况下，不必使用wp\\u localize\\u脚本，您可以将js变量挂接到wp\\u头，这样所有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
}

SO网友:Weston Ruter

您可以在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攻击。

SO网友:Subharanjan

最后我做了这个。现在可以了！！谢谢@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\' );

SO网友:Erutan409

虽然这不是我最好的工作，但这是另一种直接的方法来完成将数据放入响应：

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

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

结束

小码农CODE

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

相关推荐