Adicionando Atributos Adicionais na Tag de Script para JS de Terceiros

16

Eu corri para este ao tentar integrar queda do Dropbox no seletor de API para um plugin que eu sou escrevendo.

A documentação da API instrui você a colocar a seguinte tag script no topo do seu arquivo:

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

Tudo bem e bom, e funciona quando colo diretamente na página que é chamada na seção de administração. Mas, eu gostaria de usar alguma variação de wp_register_script (), wp_enqueue_script () e wp_localize_script () para passar o ID necessário e-app-chave de dados.

Eu tentei algumas variações diferentes disso:

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 é substituído pela chave de aplicativo apropriada no meu código. Gostaria de receber qualquer direção. Obrigado.

EDIT: Também tentei fazê-lo com alguma jquery, mas sem sucesso. Tentei na carga do documento e no documento pronto. Eu recebo um {"error": "app_key inválido"} retornar.

$('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');
    
por Andrew Bartel 20.08.2013 / 21:39

9 respostas

14

você pode tentar usar o gancho do filtro script_loader_src , por exemplo:

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

Atualizar

eu mesmo descobri que o src é escapado por esc_url, então, procurando um pouco mais, encontrei o filtro clean_url que você pode usar para retornar o valor com seus dados de ID e de chave do aplicativo:

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;
}
    
por Bainternet 27.08.2013 / 23:57
7

Desde o WP 4.1.0, um novo gancho de filtro está disponível para isso:

script_loader_tag

Use desta maneira:

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;
}
    
por ClemC 01.11.2016 / 00:17
3

OK, parece (para mim) que com wp_enqueque_scripts não é possível para imprimir o ID e a chave do aplicativo como atributos de tag de script.

Tenho certeza de que 90%, porque WP_Dependencies não é uma classe que conheço bem, mas olhando para o código Não parece possível para mim.

Mas tenho certeza de que, em 100%, usar wp_localize_script não é útil para seu escopo .

Como eu disse no meu comentário acima:

  

O que wp_localize_script faz é imprimir um objeto codificado json no html   saída da página. Este objeto é reconhecido pelo script e então você   pode usá-lo.

O que eu não disse no comentário é que o objeto codificado json é um nome arbitrário que você decide, na verdade, olhando a sintaxe:

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

O objeto chamado $object_name poderia ser usado pelo script porque está no escopo global e é impresso no html da página.

Mas o $object_name é um nome que você decide, então pode ser tudo .

Então, pergunte a si mesmo:

como o script no servidor dropbox remoto pode fazer uso de uma variável que eles não sabem como é chamado?

Portanto, não há razão nenhuma para passar a ID e / ou a chave do aplicativo para o script com wp_localize_script : você só precisa imprimi-los como atributos de tag de script como é dito nos documentos da API do Dropbox.

Eu não sou um desenvolvedor js, mas acho que o script dropbox é:

  1. obtenha todos os elementos <script> html na página
  2. alterne entre eles procurando por aquele com o 'id' == 'dropboxjs'
  3. se esse script for encontrado, olhando para a 'chave do aplicativo de dados' desse script
  4. verifique se essa chave do aplicativo (se presente) é válida e autorize você em caso afirmativo

Por favor, note que eu não sei com certeza, estou apenas adivinhando .

Deste modo, o script carregado a partir do servidor da pasta de depósito pode verificar a chave da sua aplicação de uma forma fácil e fácil de implementar para si.

Porque na primeira frase eu disse que é não possível imprimir o id e a chave do aplicativo no script usando wp_enqueque_scripts , a moral da história é que você precisa imprimi-los na marcação de outra maneira.

Uma maneira que não cheira muito (quando não há alternativas) é usar wp_print_scripts hook para imprimir a tag 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>';

}
    
por gmazzap 24.08.2013 / 03:14
1

Da resposta de Bainternet acima. Este código funcionou para mim.

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

Edit: A única diferença do código da Bainternet é que adicionei uma condição para verificar se a URL do script é dropbox e se é um arquivo .js.

Estou ignorando todas as outras URLs e reescrevendo o URL da caixa de depósito.

    
por user2914440 17.02.2014 / 13:14
1

Eu fiz algumas checagens no código dropbox.js (v2) para ver o que estava acontecendo e como resolvê-lo melhor. Acontece que a chave data-app é usada apenas para definir a variável Dropbox.appKey. Eu consigo definir a variável com a seguinte linha extra.

Usando o exemplo de javascript na página do Dropbox enlace :

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

No meu código, eu coloco o Dropbox.appKey em todos os lugares onde faço referência às rotinas javascript do Dropbox. Isso permitiu usar wp_enqueue_script () sem os parâmetros extras.

    
por Michaelkay 07.04.2014 / 21:19
0

Eu fiz isso com o meu plug-in eCards e é muito simples.

Aqui está uma cópia / colagem direta do plug-in:

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

Observe que a chave da API é passada por meio de uma opção.

    
por Ciprian 26.08.2013 / 15:55
0

Existe uma maneira mais simples de fazer isso

 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 );
    
por Max Kondrachuk 08.12.2015 / 10:58
0

Sintaxe do Wordpress para script_loader_tag :

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

Para adicionar qualquer atributo, você pode modificar sua tag $ dessa maneira:

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

Que irá escapar corretamente do URL.

    
por JackLinkers 28.01.2018 / 11:57
0

Obrigado por todas as postagens, eles realmente ajudaram. Eu rolei minha própria versão para dar alguma estrutura e facilitar a leitura e atualização. Use o enfileiramento como normal, use o script para arquivos CSS com uma tag falsa no final para que ele seja carregado na parte superior. Embora possa ser um pouco simplificado.

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;
}
    
por wpNewby 08.05.2018 / 23:39