써드 파티 JS에 대한 스크립트 태그에 추가 속성 추가

Dropbox의 선택기 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>

모두 훌륭하고 좋으며 실제로 관리자 섹션에서 호출 된 페이지에 직접 붙여 넣을 때 작동합니다. 그러나 필요한 ID와 데이터 응용 프로그램 키를 전달하기 위해 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로 시도했지만 아무 소용이 없습니다. 문서로드 및 문서 준비시이를 시도했습니다. { "오류": "잘못된 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');

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

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

OK, ID와 앱 키를 스크립트 태그 속성으로 인쇄 할 수wp_enqueque_scripts 없는 것 같습니다 .

내가 WP_Dependencies잘 아는 클래스가 아니기 때문에 90 %가 확실 하지만 코드를 볼 수는 없습니다.

하지만 사용하는 것을 100 % 확신은 wp_localize_script이다 당신의 범위에 대한 유용하지 않습니다 .

위의 의견에서 말했듯이 :

wp_localize_script는 페이지의 html 출력에 json 인코딩 된 객체를 인쇄합니다. 이 개체는 스크립트에 의해 인식되므로 사용할 수 있습니다.

내가 주석에서 말하지 않은 것은 json으로 인코딩 된 객체를 실제로 임의의 이름으로 결정하여 실제로 구문을 보겠다고 결정한다는 것입니다.

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

이름 $object_name 이 지정된 오브젝트 는 전체 범위에 있고 페이지의 html로 인쇄되므로 스크립트에서 사용할 수 있습니다.

그러나 $object_name이것은 당신이 결정 하는 이름 이므로 모든 것이 될 수 있습니다 .

따라서 스스로에게 물어보십시오.

원격 dropbox 서버의 스크립트가 어떻게 호출되는지 모르는 변수를 어떻게 사용할 수 있습니까?

그래서이없는 전혀 이유 와 스크립트에 ID 및 / 또는 앱의 키를 전달하는이 wp_localize_script: 그냥이 스크립트 태그는 속성로 인쇄하는 등의 보관 용 API 문서에 있다고한다.

저는 js 개발자는 아니지만 dropbox 스크립트의 기능은 다음과 같습니다.

1. <script>페이지의 모든 HTML 요소를 가져옵니다
2. 'id'== 'dropboxjs'가있는 것을 찾으십시오.
3. 해당 스크립트가 발견되면 해당 스크립트의 'data-app-key'를 확인하십시오.
4. 해당 앱 키 (있는 경우)가 유효한지 확인하고 필요한 경우 인증합니다

, 참고하시기 바랍니다 것을 나는 확실히, 난 그냥 추측하고있어이를 모른다 .

이런 방식으로 보관 용 서버에서로드 된 스크립트는 앱 키를 쉽고 구현하기 쉬운 방식으로 확인할 수 있습니다.

첫 번째 문장 에서을 사용하여 스크립트에서 id와 app 키를 인쇄 할 수 없다고 말했기 wp_enqueque_scripts때문에 이야기의 도덕은 다른 방법으로 마크 업으로 인쇄해야한다는 것입니다.

너무 많은 냄새가 나지 않는 방법은 (대안이 없을 때) wp_print_scriptshook을 사용 하여 스크립트 태그를 인쇄하는 것입니다.

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

}

위 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이 보관 용 계정이고 .js 파일인지 확인하는 조건을 추가했다는 것입니다.

다른 모든 URL을 무시하고 보관 용 URL을 다시 작성하고 있습니다.

dropbox.js 코드 (v2)에서 어떤 일이 일어나고 있으며이를 가장 잘 해결하는 방법을 확인했습니다. 결과적으로 data-app-key는 변수 Dropbox.appKey를 설정하는 데만 사용됩니다. 다음 추가 줄로 변수를 설정할 수 있습니다.

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>

내 코드에서는 Dropbox javascript 루틴을 참조하는 모든 위치에 Dropbox.appKey를 설정했습니다. 이렇게하면 추가 매개 변수없이 wp_enqueue_script ()를 사용할 수 있습니다.

내 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 키는 옵션을 통해 전달됩니다.

이 작업을 수행하는 더 간단한 방법이 있습니다

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

script_loader_tag의 워드 프레스 구문 :

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

속성을 추가하려면 다음과 같이 $ tag를 수정할 수 있습니다.

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을 올바르게 이스케이프합니다.

모든 게시물에 감사드립니다. 정말 도움이되었습니다. 나는 내 자신의 버전을 굴려서 구조를 만들고 읽기 쉽고 업데이트하기 쉽게했다. 일반적으로 enqueue를 사용하고 끝에 태그가 잘못된 CSS 파일에 대해 스크립트를 사용하여 맨 위에로드되도록합니다. 아마 다소 단순화 될 수 있습니다.

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