当前位置: 首页>>技术问答>>正文


在第三方JS的脚本标记中添加附加属性

webfans 技术问答 , , 去评论

问题描述

我尝试将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和app密钥数据的值:

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, $src ) {
    if ( 'dropbox.js' === $handle ) 
        $tag = '<script type="text/javascript" src="' . $src . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    }

    return $tag;
}

第三种解决办法

好吧,似乎(对我而言)使用wp_enqueque_scripts无法将id和app键打印为脚本标记属性。

我确定90%,因为WP_Dependencies不是我熟悉的类,但看着代码对我来说似乎是不可能的。

但我确信100%使用wp_localize_script对您的示波器没用。

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

What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it.

我在评论中没有说的是json-encoded对象作为您决定的任意名称,实际上是在查看语法:

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

脚本可以使用名为$object_name的对象,因为它位于全局范围内并打印在页面的html中。

但是$object_name是您决定的名称,所以它可以是一切。

所以问问自己:

远程Dropbox服务器中的脚本如何使用他们不知道如何调用的变量?

因此,根本没有理由使用wp_localize_script将id和/或app密钥传递给脚本:您只需将它们打印为脚本标记属性,如Dropbox API文档中所述。

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

  1. 获取页面中的所有<script> html元素

  2. 通过它们循环寻找’id’ == ‘dropboxjs’

  3. 如果找到该脚本,则查看该脚本的’data-app-key’

  4. 检查该应用密钥(如果存在)是否有效,如果是,则授权您

请注意,我肯定不知道这一点,我只是在猜测。

通过这种方式,从Dropbox服务器加载的脚本可以以一种易于使用且易于实现的方式检查您的应用程序密钥。

因为在第一句话中我说过不可能使用wp_enqueque_scripts在脚本中打印id和app键,故事的寓意是你必须以另一种方式在标记中打印它们。

一种没有太多气味的方法(当没有替代品时)是使用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>';

}

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/3005.html,转载请务必附带本地址声明。