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

时间:2013-08-20 作者:Andrew Bartel

我在尝试集成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\\u register\\u script()、wp\\u enqueue\\u script()和wp\\u localize\\u script()的一些变体来传递必要的id和数据应用程序密钥。

我尝试了几种不同的方法:

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\\u APP\\u密钥将替换为相应的应用程序密钥。如有任何指示,我将不胜感激。谢谢

编辑:也尝试使用一些jquery进行编辑,但没有效果。在文档加载和文档就绪时进行了尝试。我得到一个{“error”:“Invalid app\\u 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\');

9 个回复
最合适的回答,由SO网友:Bainternet 整理而成

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

SO网友:ClemC

由于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;
}

SO网友:gmazzap

好吧,(对我来说)似乎wp_enqueque_scripts 不是possible 将id和应用程序密钥打印为脚本标记属性。

我肯定是90%,因为WP_Dependencies 不是一个我很熟悉的类,但看看代码,我觉得这是不可能的。

但我百分之百确信wp_localize_scriptnot useful for your scope.

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

wp\\u localize\\u脚本所做的是在页面的html输出中打印一个json编码的对象。脚本可以识别此对象,因此您可以使用它。

我在评论中没有提到的是,json编码的对象是一个任意名称,您可以根据语法来决定:

wp_localize_script( $handle, $object_name, $l10n );
名为的对象$object_name 可以由脚本使用,因为它位于全局范围内,并以页面的html打印。

但是$object_name 是一个由你决定的名字,所以它可以是所有的东西。

所以问问自己:

how the script in the remote dropbox server can make use of a variable that they don\'t know how is called?

所以有no reason at all 要将id和/或应用程序密钥传递给脚本,请使用wp_localize_script: you have just to print them as script tag attributes 正如Dropbox API文档中所述。

我不是js开发人员,但我认为dropbox脚本的作用是:

获取全部<script> 页面中的html元素在其中循环,查找具有“id”=“dropboxjs”的元素如果找到该脚本,请查看该脚本的“data app key”(数据应用程序密钥),检查该应用程序密钥(如果存在)是否有效,如果是,请授权您,请注意I don\'t know this for sure, I\'m just guessing.

通过这种方式,从dropbox服务器加载的脚本可以检查你的应用程序密钥,这对他们来说很容易,对你来说也很容易实现。

因为在第一句话中我说过not 可以使用打印脚本中的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>\';

}

SO网友:user2914440

从上面班纳特的回复来看。这个代码对我有用。

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并重写dropbox URL。

SO网友:wpNewby

感谢所有的帖子,他们真的很有帮助。我确实推出了自己的版本,为其提供了一些结构,使其更易于阅读和更新。正常情况下使用排队,对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;
}

SO网友:Ciprian

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

SO网友:Michaelkay

我在投递箱里做了些检查。js代码(v2)来查看发生了什么以及如何最好地解决这个问题。事实证明,data app键仅用于设置变量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。appKey在我引用Dropbox javascript例程的每个地方。这样做允许我使用wp\\u enqueue\\u script(),而不需要额外的参数。

SO网友:Max Kondrachuk

有一种更简单的方法

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

SO网友:JackLinkers

的Wordpress语法script_loader_tag :

apply_filters( \'script_loader_tag\', string $tag, string $handle, string $src )
要添加任何属性,可以通过以下方式修改$标记:

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。

结束

相关推荐

Display All Non-Used Plugins

我的公司目前拥有大约20个多站点,并且每天都在增长。我们正在尝试通过插件并制定标准。IE,表单使用插件X。然而,我们还没有找到一种单一的方法来检查和系统地显示哪些插件甚至没有被使用。是否有一个功能可以向我们显示已使用或未使用的插件?我试着寻找我能想到的一切,但我一生都找不到答案。