WordPress 是否可以使用 wp_localize_script 來創建沒有特定腳本句柄的全局 JS 變量？

問題描述

我們可以以某種方式使用 wp_localize_script() 創建全局 js 變量，而不需要特定的腳本句柄即可從所有 js 文件訪問，即使 js 腳本沒有正確使用 wp_enqueue_script 入隊？

這是我正在使用的代碼，它為’ajaxscript’ 句柄創建 varibale，所以我無法訪問由<script src="xxx" .... /> 直接包含在 header.php 中的 js 文件中的對象’ajaxobject’

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

最佳解決方案

在這種情況下，不用使用 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
}

次佳解決方案

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

第三種解決方案

我最終這樣做它現在工作了！謝謝 @ 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' );

參考文獻

• Is it possible to use wp_localize_script to create global JS variables without a specific script handle?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。