Aggiunta di attributi aggiuntivi nel tag script per JS di terze parti

Mi sono imbattuto in questo quando ho provato a integrare il drop di Dropbox nell'API di selezione in un plug-in che sto scrivendo.

La documentazione dell'API indica di posizionare il seguente scripttag nella parte superiore del file:

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

Tutto bene e bene, e in realtà funziona quando lo incollo direttamente nella pagina che viene chiamata nella sezione admin. Ma vorrei usare alcune varianti di wp_register_script (), wp_enqueue_script () e wp_localize_script () per passare l'id e la chiave-app-dati necessari.

Ho provato un paio di varianti diverse di questo:

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

E:

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 viene sostituito con la chiave dell'applicazione appropriata nel mio codice. Gradirei qualsiasi direzione. Grazie.

EDIT: Ho anche provato a farlo con un po 'di jquery, ma senza risultati. Provato sul caricamento del documento e sul documento pronto. Ottengo un {"errore": "App_key non valido"} ritorno.

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

puoi provare a utilizzare il script_loader_srcgancio del filtro, ad esempio:

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

Aggiornare

ho appena capito che l'src è sfuggito a esc_url, quindi guardando un po 'di più ho trovato il clean_urlfiltro che puoi usare per restituire il valore con i tuoi dati chiave ID e 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;
}

A partire da WP 4.1.0, è disponibile un nuovo gancio filtro per raggiungere questo obiettivo facilmente:

script_loader_tag

Usalo in questo modo:

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, mi sembra che con me wp_enqueque_scriptsnon sia possibile stampare l'id e la chiave dell'app come attributi del tag script.

Sono sicuro al 90%, perché WP_Dependenciesnon è una classe che conosco bene, ma guardando il codice Non mi sembra possibile.

Ma sono sicuro al 100% che l'utilizzo nonwp_localize_script è utile per il tuo ambito .

Come ho detto nel mio commento sopra:

Quello che fa wp_localize_script è stampare un oggetto con codifica json nell'output html della pagina. Questo oggetto è riconosciuto dallo script e quindi puoi usarlo.

Quello che non ho detto nel commento è che l'oggetto con codifica json come nome arbitrario che decidi, infatti, guardando la sintassi:

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

L'oggetto denominato $object_name potrebbe essere utilizzato dallo script perché è nell'ambito globale e stampato nell'html della pagina.

Ma il $object_nameè un nome che si decide, quindi può essere tutto .

Quindi chiediti:

come lo script nel server di dropbox remoto può utilizzare una variabile che non sanno come viene chiamata?

Quindi non c'è alcun motivo per passare id e / o chiave app allo script con wp_localize_script: devi solo stamparli come attributi dei tag dello script, come si dice nei documenti API di Dropbox.

Non sono uno sviluppatore js, ma penso che lo script dropbox faccia:

1. ottieni tutti gli <script>elementi html nella pagina
2. scorrili cercando quello con "id" == "dropboxjs"
3. se viene trovato quello script, guardando la 'chiave-app-dati' di quello script
4. controlla se quella chiave dell'app (se presente) è valida e ti autorizza in tal caso

Per favore, nota che non lo so per certo, sto solo indovinando .

In questo modo, lo script caricato dal server dropbox può controllare la chiave della tua app in modo che sia facile per loro e facile da implementare per te.

Perché nella prima frase ho detto che non è possibile stampare l'id e la chiave dell'app nello script usando wp_enqueque_scripts, la morale della storia è che devi stamparli nel markup in un altro modo.

Un modo che non ha un odore eccessivo (quando non ci sono alternative) è usare l' wp_print_scriptshook per stampare il tag dello 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>';

}

Dalla risposta di Bainternet sopra. Questo codice ha funzionato per me.

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

Modifica: l'unica differenza rispetto al codice Bainternet è che ho aggiunto una condizione per verificare se l'URL dello script è dropbox ed è un file .js.

Sto ignorando tutti gli altri URL e riscrivo l'URL della casella personale.

Ho fatto qualche controllo nel codice dropbox.js (v2) per vedere cosa stava succedendo e come risolverlo al meglio. A quanto pare, la chiave dell'app per i dati viene utilizzata solo per impostare la variabile Dropbox.appKey. Sono in grado di impostare la variabile con la seguente riga aggiuntiva.

Utilizzando l'esempio javascript nella pagina Dropbox 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>

Nel mio codice ho impostato Dropbox.appKey in ogni luogo in cui faccio riferimento alle routine javascript di Dropbox. In questo modo mi ha permesso di utilizzare wp_enqueue_script () senza i parametri aggiuntivi.

L'ho fatto con il mio plugin eCards ed è davvero semplice.

Ecco una copia / incolla diretta dal 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>';

Si noti che la chiave API viene passata tramite un'opzione.

C'è un modo più semplice per farlo

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

Sintassi di Wordpress per script_loader_tag :

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

Per aggiungere qualsiasi attributo, puoi modificare il tuo $ tag in questo modo:

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

Che sfuggirà correttamente all'URL.

Grazie per tutte le pubblicazioni, mi hanno davvero aiutato. Ho fatto il roll della mia versione per darle una struttura e facilitare la lettura e l'aggiornamento. Usa enqueue come di consueto, usa lo script per i file CSS con un tag falso alla fine in modo che si carichi in alto. Anche se probabilmente può essere semplificato in qualche modo.

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