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

20

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');
Andrew Bartel
sumber
2
Apa yang wp_localize_scriptdilakukan adalah mencetak objek yang dikodekan json di output html halaman. Objek ini dikenali oleh skrip sehingga Anda dapat menggunakannya. Yang Anda butuhkan adalah menambahkan beberapa atribut ke tag skrip, sehingga wp_localize_scripttidak dapat membantu Anda.
gmazzap
2
GM benar yang wp_localize_scripttidak membuat atribut skrip. Tetapi apakah mungkin untuk meneruskan kunci aplikasi langsung ke dropbox.js? Hanya tebakan tetapi apakah Anda sudah mencoba array('appKey'=>"MY_APP_KEY")? Ini adalah kode yang mengambil kunci dari atributif(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}
epilektric
Hey @epilektric Bisakah Anda menjawabnya? Saya tidak cukup mengikuti cara mengimplementasikannya.
Andrew Bartel
@epilektric dengan wp_localize_scriptyakin Anda dapat meneruskan atribut ke skrip. Saya benar-benar tidak tahu apakah ini akan berhasil atau tidak, namun itu bukan masalah yang terkait dengan pertanda.
gmazzap
@AndrewBartel Saya juga tidak begitu yakin bagaimana caranya. Mungkin ini akan membantu. pippinsplugins.com/use-wp_localize_script-it-is-awesome
epilektric

Jawaban:

18

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;
}
Bainternet
sumber
Itu tidak bekerja. Sebelum dicetak, hasil dari 'script_loader_src' diloloskan, sehingga kutipan dilucuti dan apa yang Anda output diakui sebagai bagian dari atribut 'src' dan bukan sebagai atribut yang terpisah. Kode ini akan dimasukkan ke dalam sesuatu markup html seperti<script type='text/javascript' src='https://www.dropbox.com/static/api/1/dropins.js?ver=3.6&#039;id=&#039;dropboxjs&#039;data-app-key=&#039;MY_APP_KEY'></script>
gmazzap
ya saya memperbarui jawaban saya.
Bainternet
3
Saya telah menguji kode setelah diedit dan berfungsi. Terima kasih telah mengajarkan sesuatu kepadaku dengan ini.
gmazzap
1
Saya pikir OP akan lebih bahagia dari Anda dan saya. ;)
gmazzap
1
Terima kasih @Bainternet atas bantuan Anda, membuatnya bekerja menggunakan jawaban Anda.
Andrew Bartel
14

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;
}
ClemC
sumber
apakah ini dijalankan sebelum caching JS terjadi?
Joanna Mikalai
3

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

}
gmazzap
sumber
Terima kasih GM, saya berhasil menggunakan ini. Saya tertarik untuk melihat apakah ada solusi alternatif menggunakan kait enqueue tapi saya menghargai semua pemikiran yang Anda masukkan ke dalam jawabannya.
Andrew Bartel
@AndrewBartel Saya pikir tidak ada cara untuk menggunakan wp_enqueque_scripts dalam kasus Anda, tetapi jika Anda menemukannya, beri tahu kami! :)
gmazzap
solusi Anda dapat meningkatkan beban di server karena Anda secara langsung membuat 1 permintaan http lagi dengan melakukan gema. Solusinya bagus tapi tidak dioptimalkan.
Faisal Shaikh
@FaisalShaikh mau jelaskan? The echopernyataan tidak setiap permintaan HTTP sejauh yang saya tahu, dan WordPress wp_enqueue_scriptmelakukan gema juga (lihat core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/... ) Tentunya Anda bisa mengurangi jumlah permintaan dengan menggabungkan skrip dengan skrip lain yang Anda miliki tetapi: 1) skrip ada di server pihak ke-3 dalam hal ini 2) dengan HTTP 2 saat ini menggabungkan skrip akan mengurangi kinerja, bukan meningkatkannya. Jadi mungkin saya melewatkan sesuatu?
gmazzap
@ gmazzap kamu benar. sebenarnya, saya punya cara berbeda untuk melakukan ini. Kita dapat menyimpan js bagian 3 ini ke server kami dan saya benar-benar tidak merasa bahwa menggabungkan skrip dapat meningkatkan beban di server.
Faisal Shaikh
1

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.

pengguna2914440
sumber
2
Harap tambahkan beberapa penjelasan tentang apa yang Anda ubah dan mengapa Anda mengubahnya (atau harus mengubahnya).
tfrommen
Saya tahu ini adalah respons lama tetapi dalam kode Anda di atas, apakah Anda bermaksud mengembalikan $ original_url di dalam pernyataan IF alih-alih hanya $ url?
leromt
1

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.

Michaelkay
sumber
0

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.

Ciprian
sumber
Bagaimana $ output digunakan? Gema? Tambahkan ke wp_print_scripts ()?
Andrew Bartel
Entah dikembalikan atau digaungkan, tergantung pada fungsi Anda.
Ciprian
0

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 );
Max Kondrachuk
sumber
0

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.

JackLinkers
sumber
0

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