在第三方JS的脚本标签中添加其他属性

尝试将Dropbox 在选择器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>

一切都很好，当我直接将其粘贴到admin部分中调用的页面中时，它实际上可以工作。但是，我想使用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，但无济于事。在加载文档和准备文档时对其进行了尝试。我收到{“错误”：“无效的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;
}

从WP 4.1.0起，可以使用新的过滤器挂钩轻松实现此目的：

script_loader_tag

使用这种方式：

add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

function add_id_to_script( $tag, $handle, $source ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . $source . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    }

    return $tag;
}

OK，看来（我）与wp_enqueque_scripts没有可能打印的ID和应用程序键脚本标记属性。

我相信90％是因为 WP_Dependencies这不是我所熟知的类，但是查看代码对我来说似乎是不可能的。

但我敢肯定在100％，使用wp_localize_script是不是你的范围有用。

正如我在上面的评论中所说：

wp_localize_script的作用是在页面的html输出中打印一个json编码的对象。脚本可以识别该对象，因此您可以使用它。

我在评论中没有说的是，您实际上是通过查看语法来决定将json编码的对象作为任意名称的：

wp_localize_script( $handle, $object_name, $l10n );

命名的对象$object_name 可以通过脚本中使用，因为是在全球范围内，并在页面的HTML打印。

但这$object_name是您决定的名称，因此可以是所有名称。

所以问问自己：

远程保管箱服务器中的脚本如何使用他们不知道如何调用的变量？

因此，根本没有理由通过以下方式将id和/或应用程序密钥传递给脚本wp_localize_script：您只需按照Dropbox API文档中的说明将它们作为脚本标签属性进行打印即可。

我不是js开发人员，但我认为保管箱脚本的作用是：

1. 得到所有 <script>页面中的 html元素
2. 遍历他们寻找带有'id'=='dropboxjs'的那个
3. 如果找到该脚本，请查看该脚本的“数据应用键”
4. 检查该应用程序密钥（如果存在）是否有效，并授权您

请注意，我不确定，我只是在猜测。

这样，从保管箱服务器加载的脚本可以以一种易于使用且易于实现的方式检查您的应用密钥。

因为我在第一句话中说过无法使用来在脚本中打印id和应用程序密钥wp_enqueque_scripts，所以故事的寓意是您必须以另一种方式在标记中打印它们。

一种没有太多气味的方法（没有替代方法时）是使用wp_print_scripts钩子来打印脚本标签：

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // only for admin area

  $app_key = 'MY_APP_KEY';

  // why do not create an option for it?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

}

来自上面的Bainternet的回复。这段代码对我有用。

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        remove_filter('clean_url','pmdi_dropbox',10,3);
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";
    }
}

编辑：与Bainternet代码的唯一区别是，我添加了一个条件来检查脚本URL是否为dropbox以及是否为.js文件。

我忽略了所有其他URL，并重写了保管箱URL。

我在dropbox.js代码（v2）中做了一些检查，以查看发生了什么以及如何最好地解决此问题。事实证明，data-app-key仅用于设置变量Dropbox.appKey。我可以使用以下额外的行来设置变量。

使用Dropbox页面上的javascript示例https://www.dropbox.com/developers/dropins/chooser/js：

<script>
Dropbox.appKey = "YOUR-APP-ID";
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
</script>

在我的代码中，我在引用Dropbox javascript例程的每个位置都设置了Dropbox.appKey。这样做使我无需额外的参数就可以使用wp_enqueue_script（）。

我是通过eCards插件完成的，这非常简单。

这是插件的直接复制/粘贴：

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

请注意，API密钥是通过选项传递的。

有一种更简单的方法

 function load_attributes( $url ){
    if ( 'https://www.dropbox.com/static/api/1/dropins.js' === $url ){
        return "$url' id='dropboxjs' data-app-key='MY_APP_KEY";
    }

    return $url;
}

add_filter( 'clean_url', 'load_attributes', 11, 1 );

用于script_loader_tag的 Wordpress语法：

apply_filters( 'script_loader_tag', string $tag, string $handle, string $src )

要添加任何属性，您可以通过以下方式修改$ tag：

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    } 
    return $tag;
}

哪个将正确转义URL。

感谢所有发布，他们确实提供了帮助。我确实发布了自己的版本，以使其具有一定的结构，并使其更易于阅读和更新。正常使用enqueue，将脚本用于末尾带有false标记的CSS文件，以便将其加载到顶部。虽然它可能可以简化一些。

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {

    $scripts_to_load = array (

        (0) => Array
          (
            ('name') => 'bootstrap_min_css',
            ('type') => '<link rel="stylesheet" href="',            
            ('integrity') => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
            ('close') => ' type="text/css" media="all">'
          ),

        (1) => Array
          (
            ('name') => 'popper_min_js',
            ('type') => '<script type="text/javascript" src="',         
            ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
            ('close') => '></script>'
          ),

         (2) => Array
           (
            ('name') => 'bootstrap_min_js', 
            ('type') => '<script type="text/javascript" src="',
            ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
            ('close') => '></script>'
           )
    );  

    $key = array_search($handle, array_column($scripts_to_load, 'name'));

    if ( FALSE !== $key){

        $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

    }
    return $tag;
}