WordPress 在第三方 JS 的指令碼標籤中新增附加屬性

問題描述

嘗試將 Dropbox 的 drop in chooser API 整合到我正在寫的外掛時遇到這種情況。

API 檔案指示您將以下 script 標記放置在檔案的頂部：

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>

所有的罰款都很好，而且當我直接將其貼上到管理部分中呼叫的頁面時，它實際上是有效的。但是，我想使用一些變體的 wp_register_script()， wp_enqueue_script() 和 wp_localize_script() 來傳遞必要的 ID 和 data-app-key 。

我已經嘗試了幾個不同的變體：

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {
    wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
    wp_enqueue_script('dropbox.js');
    wp_localize_script('dropbox.js','dropboxdata',array('id'=>"dropboxjs",'data-app-key'=>"MY_APP_KEY"));
}

和：

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {
        wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
        wp_enqueue_script('dropbox.js');
        wp_localize_script('dropbox.js','dropboxdata',array(array('id'=>"dropboxjs"),array('data-app-key'=>"MY_APP_KEY")));
    }

MY_APP_KEY 被替換為我的程式碼中相應的應用程式鍵。會感謝任何方向。謝謝。

編輯：也嘗試用一些 jquery 做，但沒有用。在檔案載入和檔案準備時嘗試。我得到一個 {“error”：「無效的 app_key」} 返回。

$('script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]').attr('id','dropboxjs').attr('data-multiselect','true').attr('data-app-key','MY_APP_KEY');

最佳解決方案

您可以嘗試使用 script_loader_src 過濾器掛鉤，例如：

add_filter('script_loader_src','add_id_to_script',10,2);
function add_id_to_script($src, $handle){
    if ($handle != 'dropbox.js')
            return $src;
    return $src."' id='dropboxjs' data-app-key='MY_APP_KEY";
}

更新

我只是想出了自己的 src 是由 esc_url 逃脫，所以再看一點，我發現 clean_url 過濾器，你可以用它來返回值與你的 id 和應用程式的關鍵資料：

add_filter('clean_url','unclean_url',10,3);
function unclean_url( $good_protocol_url, $original_url, $_context){
    if (false !== strpos($original_url, 'data-app-key')){
      remove_filter('clean_url','unclean_url',10,3);
      $url_parts = parse_url($good_protocol_url);
      return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='MY_APP_KEY";
    }
    return $good_protocol_url;
}

參考文獻

Adding Additional Attributes in Script Tag for 3rd party JS

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

WordPress 在第三方 JS 的指令碼標籤中新增附加屬性