Menambahkan Atribut Tambahan di Tag Skrip untuk JS pihak ke-3

Saya mengalami ini ketika mencoba untuk mengintegrasikan API pemilih dropbox Dropbox ke sebuah plugin yang saya tulis.

Dokumentasi API memerintahkan Anda untuk menempatkan scripttag berikut di bagian atas file Anda:

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

Semua baik dan bagus, dan itu benar-benar berfungsi ketika saya langsung menempelkannya ke halaman yang disebut di bagian admin. Tapi, saya ingin menggunakan beberapa variasi wp_register_script (), wp_enqueue_script () dan wp_localize_script () untuk meneruskan id dan data-app-key yang diperlukan.

Saya sudah mencoba beberapa variasi berbeda dari ini:

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

Dan:

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 diganti dengan kunci aplikasi yang sesuai dalam kode saya. Akan menghargai segala arah. Terima kasih.

EDIT: Juga mencoba melakukannya dengan beberapa jquery, tetapi tidak berhasil. Mencobanya saat memuat dokumen dan dokumen siap. Saya mendapatkan {"error": "app_key" tidak valid}} kembali.

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

Anda dapat mencoba menggunakan script_loader_srchook filter misalnya:

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

Memperbarui

saya baru tahu sendiri bahwa src diloloskan oleh esc_url, jadi tampak sedikit lebih saya menemukan clean_urlfilter yang dapat Anda gunakan untuk mengembalikan nilai dengan id dan data kunci aplikasi Anda:

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

Sejak WP 4.1.0, hook filter baru tersedia untuk mencapai ini dengan mudah:

script_loader_tag

Gunakan seperti ini:

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, sepertinya (bagi saya) bahwa dengan wp_enqueque_scriptstidak mungkin untuk mencetak id dan kunci aplikasi sebagai atribut tag skrip.

Saya yakin 90%, karena WP_Dependenciesbukan kelas yang saya kenal dengan baik, tetapi melihat kode sepertinya tidak mungkin bagi saya.

Tapi aku yakin 100% bahwa menggunakan wp_localize_scriptini tidak berguna untuk lingkup Anda .

Seperti yang saya katakan di komentar saya di atas:

Apa yang dilakukan wp_localize_script adalah mencetak objek yang dikodekan json dalam output html halaman. Objek ini dikenali oleh skrip sehingga Anda dapat menggunakannya.

Apa yang saya tidak katakan dalam komentar adalah bahwa objek yang dikodekan json sebagai nama arbitrer yang Anda putuskan, pada kenyataannya, melihat sintaks:

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

Objek yang dinamai $object_name dapat digunakan oleh skrip karena berada dalam lingkup global dan dicetak dalam html halaman.

Tetapi itu $object_nameadalah nama yang Anda putuskan, jadi itu bisa menjadi segalanya .

Jadi tanyakan pada diri sendiri:

bagaimana skrip di server dropbox jauh dapat menggunakan variabel yang mereka tidak tahu bagaimana dipanggil?

Jadi tidak ada alasan sama sekali untuk mengirimkan id dan / atau kunci aplikasi ke skrip dengan wp_localize_script: Anda hanya perlu mencetaknya sebagai atribut tag skrip seperti yang dikatakan dalam dokumen Dropbox API.

Saya bukan pengembang js, tapi saya pikir apa yang dilakukan skrip dropbox adalah:

1. dapatkan semua <script>elemen html di halaman
2. siklus melalui mereka mencari satu dengan 'id' == 'dropboxjs'
3. jika skrip itu ditemukan, lihat 'data-app-key' dari skrip itu
4. periksa apakah kunci aplikasi itu (jika ada) adalah yang valid dan beri wewenang jika demikian

Tolong, perhatikan bahwa saya tidak tahu pasti, saya hanya menebak .

Dengan cara ini, skrip yang dimuat dari server dropbox dapat memeriksa kunci aplikasi Anda dengan cara yang mudah bagi mereka dan mudah diimplementasikan untuk Anda.

Karena dalam kalimat pertama saya sudah mengatakan bahwa tidak mungkin untuk mencetak id dan kunci aplikasi dalam skrip menggunakan wp_enqueque_scripts, moral cerita adalah bahwa Anda harus mencetaknya di markup dengan cara lain.

Cara yang tidak berbau terlalu banyak (ketika tidak ada alternatif) adalah menggunakan wp_print_scriptskait untuk mencetak tag skrip:

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

}

Dari balasan Bainternet di atas. Kode ini bekerja untuk saya.

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

Sunting: Satu-satunya perbedaan dari kode Bainternet adalah, saya menambahkan syarat untuk memeriksa apakah URL skrip dropbox dan itu adalah file .js.

Saya mengabaikan semua URL lain dan menulis ulang URL dropbox.

Saya melakukan beberapa pengecekan dalam kode dropbox.js (v2) untuk melihat apa yang terjadi dan bagaimana cara terbaik untuk menyelesaikannya. Ternyata, data-app-key hanya digunakan untuk mengatur variabel Dropbox.appKey. Saya dapat mengatur variabel dengan baris tambahan berikut.

Menggunakan contoh javascript di halaman 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>

Dalam kode saya, saya mengatur Dropbox.appKey di setiap tempat di mana saya mereferensikan rutinitas javascript Dropbox. Melakukan ini memungkinkan saya untuk menggunakan wp_enqueue_script () tanpa parameter tambahan.

Saya melakukan ini dengan plugin eCards saya dan itu sangat sederhana.

Berikut ini salinan / tempel langsung dari 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>';

Perhatikan kunci API diteruskan melalui opsi.

Ada cara yang lebih sederhana untuk melakukan ini

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

Sintaks Wordpress untuk script_loader_tag :

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

Untuk menambahkan atribut apa pun, Anda dapat mengubah $ tag Anda dengan cara ini:

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

Yang mana akan keluar dari URL dengan benar.

Terima kasih untuk semua posting, mereka sangat membantu. Saya memutar versi saya sendiri untuk memberikan struktur dan membuatnya lebih mudah untuk membaca dan memperbarui. Gunakan enqueue seperti biasa, gunakan skrip untuk file CSS dengan tag palsu di bagian akhir sehingga memuat di bagian atas. Meskipun mungkin agak disederhanakan.

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