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 的脚本标签中添加附加属性