web-dev-qa-db-ja.com

サードパーティJSのスクリプトタグに追加の属性を追加する

私が書いているプラ​​グインにDropboxの drop in chooser API を統合しようとしたとき、私はこれに遭遇しました。

APIドキュメントでは、ファイルの先頭に次のscriptタグを配置するように指示されています。

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

すべてうまく、そしてそれは実際に私が直接adminセクションで呼ばれるページにそれを貼り付けるときうまくいきます。しかし、必要なIDとdata-app-keyを渡すために、wp_register_script（）、wp_enqueue_script（）、およびwp_localize_script（）のバリエーションを使用したいと思います。

私はこれのいくつかの異なるバリエーションを試してみました：

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

そして：

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が適切なアプリケーションキーに置き換えられています。任意の方向に感謝します。ありがとう。

編集：また、いくつかのjqueryでそれをやろうとしたが、無駄に。ドキュメントのロード時とドキュメントの準備時に試してみました。 {"error"： "Invalid app_key"}が返されます。

$('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');
pluginswp-enqueue-script
18
Andrew Bartel

script_loader_srcフィルタフックを使ってみることができます。

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

アップデート

srcがesc_urlによってエスケープされていることがわかったので、もう少し見て、clean_urlフィルタを見つけました。これを使用して、IDとアプリのキーデータと共に値を返すことができます。

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

WP 4.1.0以降、これを簡単に実現するための新しいフィルタフックが利用可能です。

script_loader_tag

このように使ってください。

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

OK、（私には）wp_enqueque_scriptsで可能ではなく、idとアプリキーをスクリプトタグ属性として出力するようです。

WP_Dependenciesは私がよく知っているクラスではないので、90％であると確信していますが、コードを見ると私には不可能なようです。

しかし、wp_localize_scriptを使用することはスコープには役に立たないであると100％確信しています。

上記の私のコメントで言ったように：

Wp_localize_scriptが行うことは、ページのhtml出力にjsonエンコードされたオブジェクトを印刷することです。このオブジェクトはスクリプトによって認識されるため、使用できます。

私がコメントで言っていないのは、jsonでエンコードされたオブジェクトが任意の名前であり、実際に構文を見て決定するということです。

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

$object_nameという名前のオブジェクトは、グローバルスコープ内にあり、ページのhtmlに出力されるため、スクリプトで使用できます。

ただし、$object_nameはyouが決定する名前なので、everything。

自問してみてください：

リモートDropboxサーバーのスクリプトが、どのように呼び出されるのかわからない変数をどのように使用できるか

したがって、理由はまったくありませんwp_localize_scriptを使用してidおよび/またはアプリキーをスクリプトに渡します：スクリプトタグ属性として印刷するだけです Dropbox APIドキュメントで述べられています。

私はjs開発者ではありませんが、Dropboxスクリプトの機能は次のとおりです。

  1. ページ内のすべての<script> html要素を取得します
  2. 'id' == 'dropboxjs'を持つものを探してそれらを循環します
  3. そのスクリプトが見つかった場合、そのスクリプトの「data-app-key」を見て
  4. そのアプリキー（存在する場合）が有効なものであるかどうかを確認し、そうであれば認証します。

これは確かにわかりませんが、推測しているだけですであることに注意してください。

このようにして、Dropboxサーバーから読み込まれたスクリプトは、自分にとって簡単で実装しやすい方法でアプリキーをチェックできます。

最初の文でnotはwp_enqueque_scriptsを使用してスクリプト内のidとアプリキーを印刷できると言ったので、ストーリーの教訓は、それらを印刷する必要があるということです。別の方法でマークアップ。

臭いがしすぎない方法（代替手段がない場合）は、wp_print_scriptsフックを使用してスクリプトタグを出力することです。

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

}
3
gmazzap

何が起きているのか、そしてこれをどのように解決するのがよいかを確認するために、dropbox.jsコード（v2）をチェックインしました。結局のところ、data-app-keyは変数Dropbox.appKeyを設定するためにのみ使用されます。以下の追加行で変数を設定できます。

DropboxページのJavaScriptの例を使用する 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>

私のコードでは、DropboxのJavaScriptルーチンを参照するすべての場所にDropbox.appKeyを設定しています。こうすることで、追加のパラメータなしでwp_enqueue_script（）を使用することができました。

1
Michaelkay

上記のBainternetの回答から。このコードは私にとって役に立ちました。

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

編集：Bainternetのコードとの唯一の違いは、スクリプトのURLがdropboxであり、それが.jsファイルであるかどうかをチェックするための条件を追加したことです。

他のすべてのURLを無視して、DropboxのURLを書き換えます。

1
user2914440

私は私のeCardsプラグインでこれをしました、そしてそれは本当に簡単です。

これがプラグインからの直接コピー/貼り付けです。

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

APIキーがオプションを介して渡されることに注意してください。

0
Ciprian

script_loader_tag のWordpress構文

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

属性を追加するには、$タグをこのように修正します。

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

これは正しくURLをエスケープします。

0
JackLinkers

すべての投稿をありがとう、彼らは本当に助けました。私はそれに何らかの構造を与えるために私自身のバージョンをロールバックし、読みやすく更新しやすくしました。通常どおりエンキューを使用し、CSSファイルには末尾にfalseタグを付けてスクリプトを使用し、先頭にロードされるようにします。それはおそらく多少単純化することができますが。

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

もっと簡単な方法があります

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