Ajout d'attributs supplémentaires dans une balise de script pour un tiers JS

16

Je me suis heurté à cela en tentant d'intégrer la Dropbox API à un plug-in que je suis l'écriture.

La documentation de l'API vous demande de placer la balise script suivante en haut de votre fichier:

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js"id="dropboxjs" data-app-key="MY_APP_KEY"></script>

Tout va bien, et ça marche quand je le colle directement dans la page appelée dans la section admin. Mais j'aimerais utiliser une variante de wp_register_script (), wp_enqueue_script () et wp_localize_script () pour transmettre l'id et la clé data-app nécessaires.

J'ai essayé plusieurs variantes de ceci:

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

Et:

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 est remplacé par la clé d'application appropriée dans mon code. J'apprécierais n'importe quelle direction. Merci.

EDIT: a également essayé de le faire avec quelques requêtes, mais en vain. Essayé sur le chargement de document et sur le document prêt. Je reçois un {"erreur": "clé_application non valide"}.

$('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');
    
posée Andrew Bartel 20.08.2013 - 21:39

9 réponses

14

vous pouvez essayer d'utiliser le crochet de filtrage script_loader_src , par exemple:

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

Mettre à jour

Je viens de constater moi-même que esc_url échappe au code src. J'ai donc trouvé un peu plus d'informations sur le filtre clean_url que vous pouvez utiliser pour renvoyer la valeur avec votre identifiant et vos données de clé d'application:

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;
}
    
réponse donnée Bainternet 27.08.2013 - 23:57
7

Depuis WP 4.1.0, un nouveau crochet de filtrage est disponible pour y parvenir facilement:

script_loader_tag

Utilisez-le de cette façon:

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;
}
    
réponse donnée ClemC 01.11.2016 - 00:17
3

OK, il me semble qu'avec wp_enqueque_scripts , il n'est pas possible d'imprimer l'id et la clé d'application sous la forme d'attributs de balise de script.

Je suis sûr à 90%, car WP_Dependencies n'est pas une classe que je connais bien, mais en regardant le code, cela me semble impossible.

Mais, à 100%, l'utilisation de wp_localize_script n'est pas utile pour votre champ d'application .

Comme je l'ai dit dans mon commentaire ci-dessus:

  

Qu'est-ce que wp_localize_script fait est d'imprimer un objet codé JSON dans le HTML   sortie de la page. Cet objet est reconnu par le script et vous permet   peut l'utiliser.

Ce que je n'ai pas dit dans le commentaire, c'est que l'objet codé en json est un nom arbitraire que vous décidez, en fait, en regardant la syntaxe:

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

L'objet nommé $object_name pourrait être utilisé par le script car il figure dans l'étendue globale et est imprimé dans le code HTML de la page.

Mais le $object_name est un nom que vous décidez, donc il peut s'agir de tout .

Alors demandez-vous:

comment le script du serveur Dropbox distant peut-il utiliser une variable dont ils ne savent pas comment s'appelle?

Il n'y a donc aucune raison du tout de transmettre l'ID et / ou la clé d'application au script avec wp_localize_script : il vous suffit de les imprimer en tant qu'attributs de balise de script comme il est dit dans la documentation de l'API Dropbox.

Je ne suis pas un développeur JS, mais je pense que le script Dropbox est:

  1. obtenir tous les éléments <script> html de la page
  2. parcourez-les en recherchant celui qui porte l'id '==' dropboxjs '
  3. si ce script est trouvé, examinez la 'clé d'application de données' de ce script
  4. vérifier si cette clé d'application (si présente) est valide et vous autoriser si oui

Veuillez noter que je ne le sais pas avec certitude, je ne fais que deviner .

De cette manière, le script chargé à partir du serveur Dropbox peut vérifier votre clé d'application de manière simple et facile à mettre en œuvre pour vous.

Étant donné que dans la première phrase, il est impossible d'imprimer l'id et la clé d'application dans le script à l'aide de wp_enqueque_scripts , la morale de l'histoire est que vous devez les imprimer. dans le balisage d'une autre manière.

Une façon de ne pas trop sentir (lorsqu'il n'y a pas d'alternative) consiste à utiliser wp_print_scripts hook pour imprimer la balise de script:

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

}
    
réponse donnée gmazzap 24.08.2013 - 03:14
1

De la réponse de Bainternet ci-dessus. Ce code a fonctionné pour moi.

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

Éditer: la seule différence par rapport au code Bainternet est que j’ai ajouté une condition permettant de vérifier si l’URL du script est dropbox et qu’il s’agit d’un fichier .js.

J'ignore toutes les autres URL et réécris l'URL de la liste déroulante.

    
réponse donnée user2914440 17.02.2014 - 13:14
1

J'ai vérifié dans le code dropbox.js (v2) ce qui se passait et comment le résoudre au mieux. En fin de compte, la clé data-app est uniquement utilisée pour définir la variable Dropbox.appKey. Je suis capable de définir la variable avec la ligne supplémentaire suivante.

Utilisation de l'exemple javascript de la page Dropbox enlace :

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

Dans mon code, je place Dropbox.appKey à chaque endroit où je fais référence aux routines JavaScript de Dropbox. Cela m'a permis d'utiliser wp_enqueue_script () sans les paramètres supplémentaires.

    
réponse donnée Michaelkay 07.04.2014 - 21:19
0

Je l'ai fait avec mon plugin eCards et c'est très simple.

Voici un copier / coller direct du plugin:

$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>';

Notez que la clé API est transmise via une option.

    
réponse donnée Ciprian 26.08.2013 - 15:55
0

Il existe un moyen plus simple de le faire

 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 );
    
réponse donnée Max Kondrachuk 08.12.2015 - 10:58
0

Syntaxe Wordpress pour script_loader_tag :

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

Pour ajouter un attribut quelconque, vous pouvez modifier votre balise $ de la manière suivante:

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

Qui échappera correctement à l'URL.

    
réponse donnée JackLinkers 28.01.2018 - 11:57
0

Merci pour tous les messages, ils ont vraiment aidé. J'ai fait rouler ma propre version pour la structurer et la rendre plus facile à lire et à mettre à jour. Utilisez la mise en file d'attente comme d'habitude, utilisez le script pour les fichiers CSS avec une balise false à la fin pour qu'elle se charge en haut. Bien que cela puisse probablement être quelque peu simplifié.

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;
}
    
réponse donnée wpNewby 08.05.2018 - 23:39

Lire d'autres questions sur les étiquettes