尝试将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');


评论

wp_localize_script的作用是在页面的html输出中打印一个json编码的对象。脚本可以识别该对象,因此您可以使用它。您需要在脚本标签中添加一些属性,因此wp_localize_script无法帮助您。

G. M.正确的是wp_localize_script不创建脚本属性。但是可以将应用程序密钥直接传递到dropbox.js吗?只是一个猜测,但是您是否尝试过array('appKey'=>“ MY_APP_KEY”)?这是从属性if(!Dropbox.appKey){Dropbox.appKey =(e = document.getElementById(“ dropboxjs”))!= null?e.getAttribute(“ data-app-key” ):void 0}

嘿@epilektric您能回答这个问题吗?我不太了解如何实现它。

@epilektric与wp_localize_script一起确保您可以将属性传递给脚本。我真的不知道这是否行得通,但这不是与工作相关的问题。

@AndrewBartel我也不确定如何。也许这会有所帮助。 pippinsplugins.com/use-wp_localize_script-it-is-awesome

#1 楼

您可以尝试使用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";
}


Update

我只是自己发现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;
}


评论


It doesn't work. Before being printed, the result of 'script_loader_src' is escaped, so quotes are stripped out and what you output is recognized as part of 'src' attribute and not as separate attributes. This code will put in the html markup something like

– gmazzap♦
Aug 28 '13 at 7:21

是的,我更新了答案。

–互联网
13年8月28日在7:29

编辑后,我已经测试了代码,并且可以正常工作。谢谢你教给我一些东西。

– gmazzap♦
13年8月28日在7:45



我认为OP将比您和我更快乐。 ;)

– gmazzap♦
13年8月28日在7:49

感谢@Bainternet的帮助,请使用您的答案使其正常工作。

–安德鲁·巴特尔(Andrew Bartel)
13年8月29日在23:40

#2 楼

从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;
}


评论


这会在任何JS缓存发生之前执行吗?

– JoaMika
18年8月22日在11:16

#3 楼

好的,在我看来,使用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开发人员,但我认为dropbox脚本的作用是:


获取页面中的所有<script> html元素
循环遍历它们以查找带有'id'=='dr的元素opboxjs'
,如果找到该脚本,请查看该脚本的'data-app-key'
检查该应用程序密钥(如果存在)是否有效,并授权您

请注意,我不确定我只是不确定。

这样,从保管箱服务器加载的脚本可以在对他们来说很容易实现的方法。

因为在第一句话中我说过无法使用wp_enqueque_scripts在脚本中打印id和应用程序密钥,所以故事的寓意是您必须以另一种方式在标记中打印它们。
< br气味不大的一种方法(没有其他选择时)是使用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>';

}


评论


感谢G.M.,让我可以使用它。我很想看看是否有使用入队钩子的替代解决方案,但我很感谢您提出的所有想法。

–安德鲁·巴特尔(Andrew Bartel)
13年8月26日在21:59

@AndrewBartel我认为您无法使用wp_enqueque_scripts,但如果您找到了wp_enqueque_scripts,请告诉我们! :)

– gmazzap♦
2013年8月27日0:37



您的解决方案可能会增加服务器的负载,因为您通过执行echo直接发出了另外1个http请求。该解决方案很好,但尚未优化。

–Faisal Shaikh
18年7月16日在21:19



@FaisalShaikh在乎解释吗?据我所知,echo语句没有任何HTTP请求,并且WordPress wp_enqueue_script也会执行echo(请参阅core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/…)。通过将脚本与您拥有的其他脚本组合来减少请求的数量,请执行以下操作:1)在这种情况下,脚本存在于第三方服务器中2)如今使用HTTP 2组合脚本会降低性能,而不是提高性能。所以也许我想念什么?

– gmazzap♦
18年7月17日在14:55

@gmazzap,你是对的。实际上,我有另一种方式来做到这一点。我们可以将第3部分js存储到我们的服务器中,我真的不认为组合脚本会增加服务器的负载。

–Faisal Shaikh
18年7月18日在11:22

#4 楼

来自上面的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。

评论


请添加一些更改说明以及更改原因(或必须更改)。

–tfrommen
2014-02-17 12:42



我知道这是一个旧的响应,但是在上面的代码中,您是否要在IF语句中返回$ original_url而不是仅返回$ url?

– leromt
15年3月12日在21:01

#5 楼

我是使用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密钥通过选项传递。

评论


$ output如何使用?回响了吗?添加到wp_print_scripts()吗?

–安德鲁·巴特尔(Andrew Bartel)
13年8月26日在21:57

根据您的功能,它可以返回或回显。

–人
13年8月27日在10:23

#6 楼

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

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

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


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

#7 楼

有一种更简单的方法可以做到这一点

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


#8 楼

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。

#9 楼

感谢所有发布,他们确实提供了帮助。我确实发布了自己的版本,以使其具有一定的结构并使阅读和更新更加容易。正常使用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;
}