Добавление Дополнительных Атрибутов в Теге script для третьей стороны 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>

Весь штраф и польза, и это на самом деле работает, когда я непосредственно вставляю его в страницу, которую называют в администраторском разделе. Но, я хотел бы использовать некоторое изменение 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');
21
18.09.2013, 20:20
5 ответов

можно попытаться использовать 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 фильтр, который можно использовать для возвращения значения с данными ключа идентификатора и приложения:

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;
}
18
19.02.2020, 21:56
  • 1
    Это не работает. Прежде чем быть распечатанным оставляют результата 'script_loader_src', таким образом, кавычки разделяются и что Вы производите, распознан как часть атрибута 'src' и не как отдельные атрибуты. Этот код вставит разметку HTML что-то как <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♦ 28.08.2013, 10:21
  • 2
    да я обновил свой ответ. –  Bainternet 28.08.2013, 10:29
  • 3
    , после которого я протестировал код, свое редактирование и он работает. Благодарите преподавать что-то мне с этим. –  gmazzap♦ 28.08.2013, 10:45
  • 4
    я думаю OP, будет более счастливым, чем Вы я. ;) –  gmazzap♦ 28.08.2013, 10:49
  • 5
    Спасибо @Bainternet для Вашей справки, получил его работа с помощью ответа. –  Andrew Bartel 30.08.2013, 02:40

Я сделал это со своим 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
19.02.2020, 21:56
  • 1
    Как $output используется? Отраженный? Добавить к wp_print_scripts ()? –  Andrew Bartel 27.08.2013, 00:57
  • 2
    Это или возвращено или отражено, в зависимости от Вашей функции. большое спасибо –  Ciprian 27.08.2013, 13:23

Хорошо, это кажется (мне) этим с wp_enqueque_scripts не возможно распечатать идентификатор и ключ приложения как атрибуты тега script.

Я уверен в 90%, потому что WP_Dependencies не класс, который я знаю хорошо, но рассмотрение кода, Это кажется не возможным мне.

Но я уверен при 100% то использование wp_localize_script не полезно для Вашего объема.

Поскольку я сказал в своем комментарии выше:

То, что делают wp_localize_script, распечатать json-закодированный объект в выводе HTML страницы. Этот объект распознан сценарием и таким образом, можно использовать его.

То, что я не сказал в комментарии, - то, что json-закодированный объект как произвольное имя, которое Вы решаете, на самом деле, смотря на синтаксис:

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

Объект называют $object_name мог использоваться сценарием, потому что находится в глобальной области видимости и распечатан в HTML страницы.

Но $object_name имя, которое Вы решаете, таким образом, это может быть все.

Поэтому спросите себе:

как сценарий в удаленном сервере Dropbox может использовать переменную, которую они не знают, как назван?

Таким образом, нет никакой причины вообще для передачи ключа идентификатора и/или приложения к сценарию с wp_localize_script: необходимо только распечатать их, поскольку тег script приписывает, как сказан в Dropbox документы API.

Я не js разработчик, но я думаю, что делает сценарий Dropbox:

  1. получите все <script> элементы HTML на странице
  2. цикл через них ищущий того с 'идентификатором' == 'dropboxjs'
  3. если тот сценарий найден, смотря на 'ключ приложения данных' того сценария
  4. проверьте, является ли тот ключ приложения (если есть) допустимым, и авторизуйте Вас раз так

Обратите внимание, что я не знаю это наверняка, я просто предполагаю.

Таким образом сценарий, загруженный из сервера Dropbox, может проверить Ваш ключ приложения способом, который легок для них и легок реализовать для Вас.

Поскольку в первом предложении я сказал, что это не возможно распечатать идентификатор, и приложение вводят использование сценария wp_enqueque_scripts, мораль истории - то, что необходимо распечатать их в разметке в другом отношении.

Путь, который не пахнет слишком много (когда нет никаких альтернатив) состоит в том, чтобы использовать wp_print_scripts сцепитесь для печати тега 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>';

}
3
19.02.2020, 21:56
  • 1
    Спасибо G.M., я заставил это работать с помощью этого. Мне интересно видеть, существуют ли альтернативные решения с помощью ставить в очередь рычагов, но я ценю всю мысль, которую Вы помещаете в ответ. –  Andrew Bartel 27.08.2013, 00:59
  • 2
    @AndrewBartel, я думаю, что нет никакого способа использовать wp_enqueque_scripts в Вашем случае, но если Вы находите один, сообщите нам! :) –  gmazzap♦ 27.08.2013, 03:37
  • 3
    Ваше решение может увеличить нагрузку на сервер, поскольку Вы непосредственно делаете еще 1 запрос HTTP путем выполнения эха. Решение хорошо, но не оптимизированное. –  Faisal Shaikh 17.07.2018, 00:19
  • 4
    @FaisalShaikh для объяснения? echo оператор не делает никакого Запроса HTTP насколько я могу сказать, и WordPress wp_enqueue_script делает эхо также (см. core.trac.wordpress.org/browser/tags/4.9/src/wp-includes / …), Конечно, Вы могли сократить количество запроса путем объединения сценария с некоторым другим сценарием, который Вы имеете, но: 1) сценарии существуют в стороннем сервере в этом случае 2) с HTTP 2 в наше время, комбинирующим сценарий, уменьшил бы производительность, не увеличил бы их. Таким образом, возможно, я пропускаю что-то? решение –  gmazzap♦ 17.07.2018, 17:55
  • 5
    @gmazzap Вы правы. на самом деле у меня есть другой способ сделать это. Мы можем сохранить эту 3-ю часть js в наш сервер, и я действительно не чувствую, что объединение сценария может увеличить нагрузку на сервер. –  Faisal Shaikh 18.07.2018, 14:22

От ответа 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 и переписываю URL Dropbox.

1
19.02.2020, 21:56
  • 1
    Включите некоторое объяснение, что Вы изменяете и почему Вы изменили его (или должен был изменить его). –  tfrommen 17.02.2014, 14:42
  • 2
    я знаю это, является старым ответом, но в Вашем коде выше, Вы означали возвращать $original_url в операторе IF вместо просто $url? –  leromt 12.03.2015, 23:01

Я сделал некоторую регистрацию в коде dropbox.js (v2) для наблюдения то, что происходило и как лучше всего решить это. Как оказалось, ключ приложения данных только используется для установки переменного Dropbox.appKey. Я способный установить переменную со следующей дополнительной строкой.

Используя пример JavaScript на странице 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.appKey в каждом месте, где я ссылаюсь на стандартные программы JavaScript Dropbox. Выполнение этого позволило мне использовать wp_enqueue_script () без дополнительных параметров.

1
19.02.2020, 21:56

Теги

Похожие вопросы