3rd पार्टी JS के लिए स्क्रिप्ट टैग में अतिरिक्त विशेषताएँ जोड़ना

Question

जब मैं चयनकर्ता के लिए ड्रॉपबॉक्स एपीआई में ड्रॉपबॉक्स को एकीकृत करने का प्रयास कर रहा था, तो मैं इसमें भाग लिया ।

एपीआई प्रलेखन आपको 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');

Comments

wp_localize_scriptपेज के html आउटपुट में एक json-encoded ऑब्जेक्ट प्रिंट क्या है। यह ऑब्जेक्ट स्क्रिप्ट द्वारा पहचाना जाता है और इसलिए आप इसका उपयोग कर सकते हैं। आपको स्क्रिप्ट टैग में कुछ विशेषताओं को जोड़ने की आवश्यकता है, और इसलिए wp_localize_scriptयह आपकी मदद नहीं कर सकता है।

— gmazzap

जीएम सही है कि wp_localize_scriptस्क्रिप्ट विशेषताओं का निर्माण नहीं करता है। लेकिन क्या ऐप कुंजी को सीधे dropbox.js में पास करना संभव है? बस एक अनुमान है लेकिन क्या आपने कोशिश की है array('appKey'=>"MY_APP_KEY")? यह वह कोड है जो विशेषता से कुंजी को if(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}

— पकड़ता है

अरे @epilektric आप एक जवाब में डाल सकता है? मैं इसे लागू करने के तरीके का पालन नहीं कर रहा हूं।

— एंड्रयू बार्टल

@epilektric wp_localize_scriptसुनिश्चित करें कि आप स्क्रिप्ट के लिए विशेषताएँ पास कर सकते हैं। मैं वास्तव में नहीं जानता कि यह काम करेगा या नहीं, हालांकि यह एक संबंधित विषय नहीं है।

— gmazzap

@AndrewBartel मुझे यकीन नहीं है कि कैसे। शायद इससे मदद मिलेगी। pippinsplugins.com/use-wp_localize_script-it-is-awesome

— एपिलेक्ट्रिक

Answer 1

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

Comments

यह काम नहीं करता है। मुद्रित होने से पहले, '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

हाँ, मैंने अपना जवाब अपडेट किया।

— बेनेटर्ट

मैंने अपने संपादन के बाद कोड का परीक्षण किया है और यह काम करता है। इसके साथ मुझे कुछ सिखाने के लिए धन्यवाद।

— gmazzap

मुझे लगता है कि ओपी आपसे ज्यादा खुश होगा। ;)

— gmazzap

धन्यवाद @Bainternet आपकी मदद के लिए, यह आपके जवाब का उपयोग कर काम कर रहा है।

— एंड्रयू बार्टेल

Answer 2

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

Comments

जेएस कैशिंग होने से पहले क्या यह क्रियान्वित होता है?

— जोआना मिकलाई

Answer 3

ठीक है, ऐसा लगता है कि (मेरे लिए) स्क्रिप्ट टैग विशेषताओं के रूप में आईडी और ऐप कुंजी को प्रिंट करना संभवwp_enqueque_scripts नहीं है ।

मुझे यकीन है कि ९ ०% है, क्योंकि WP_Dependenciesऐसा कोई वर्ग नहीं है जिसे मैं अच्छी तरह से जानता हूं, लेकिन कोड को देखते हुए यह मेरे लिए संभव नहीं लगता है।

लेकिन मुझे यकीन है कि 100% का उपयोग wp_localize_scriptकरना आपके दायरे के लिए उपयोगी नहीं है ।

जैसा कि मैंने ऊपर अपनी टिप्पणी में कहा था:

Wp_localize_script क्या करते हैं, पेज के HTML आउटपुट में एक json-encoded ऑब्जेक्ट प्रिंट करता है। यह ऑब्जेक्ट स्क्रिप्ट द्वारा पहचाना जाता है और इसलिए आप इसका उपयोग कर सकते हैं।

मैंने टिप्पणी में जो नहीं कहा है, वह यह है कि json-encoded ऑब्जेक्ट एक मनमाना नाम है जो आप तय करते हैं, वास्तव में, वाक्यविन्यास को देखते हुए:

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

नाम वाली वस्तु का उपयोग स्क्रिप्ट द्वारा किया जा $object_name सकता है क्योंकि वैश्विक दायरे में है और पृष्ठ के HTML में मुद्रित है।

लेकिन एक $object_nameऐसा नाम है जो आप तय करते हैं, इसलिए यह सब कुछ हो सकता है ।

तो अपने आप से पूछो:

रिमोट ड्रॉपबॉक्स सर्वर में स्क्रिप्ट एक चर का उपयोग कैसे कर सकता है कि वे नहीं जानते कि कैसे कहा जाता है?

इसलिए स्क्रिप्ट के लिए आईडी और / या ऐप की कुंजी को पास करने का कोई कारण नहीं हैwp_localize_script : आपको बस उन्हें स्क्रिप्ट टैग विशेषताओं के रूप में प्रिंट करना होगा जैसा कि ड्रॉपबॉक्स एपीआई डॉक्स में कहा गया है।

मैं एक js डेवलपर नहीं हूं, लेकिन मुझे लगता है कि ड्रॉपबॉक्स स्क्रिप्ट क्या है:

1. <script>पृष्ठ में सभी HTML तत्व प्राप्त करें
2. 'आईडी' == 'ड्रॉपबॉक्सज' के साथ एक की तलाश में उनके माध्यम से चक्र
3. यदि वह स्क्रिप्ट मिलती है, तो उस स्क्रिप्ट के 'डेटा-ऐप-की' को देखना
4. जांचें कि क्या वह एप्लिकेशन कुंजी (यदि मौजूद है) एक वैध है और आपको ऐसा करने के लिए अधिकृत करती है

कृपया ध्यान दें कि मुझे यह निश्चित रूप से पता नहीं है, मैं सिर्फ अनुमान लगा रहा हूं ।

इस तरह, ड्रॉपबॉक्स सर्वर से भरी गई स्क्रिप्ट आपकी ऐप कुंजी को इस तरह से देख सकती है जो उनके लिए आसान है और आपके लिए लागू करना आसान है।

क्योंकि पहले वाक्य में मैंने कहा है कि स्क्रिप्ट का उपयोग करके आईडी और ऐप कुंजी को प्रिंट करना संभव नहीं है wp_enqueque_scripts, कहानी का नैतिक यह है कि आपको उन्हें मार्कअप में दूसरे तरीके से प्रिंट करना होगा।

ऐसा तरीका जिसमें बहुत अधिक बदबू न 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>';

}

Comments

धन्यवाद जीएम, मुझे यह प्रयोग करके काम करने के लिए मिला। मुझे यह देखने में दिलचस्पी है कि क्या एंक्यू हुक का उपयोग करके वैकल्पिक समाधान हैं, लेकिन मैं आपके द्वारा उत्तर में डाले गए सभी विचारों की सराहना करता हूं।

— एंड्रयू बार्टल

@AndrewBartel मुझे लगता है कि आपके मामले में wp_enqueque_scripts का उपयोग करने का कोई तरीका नहीं है, लेकिन यदि आप एक खोज करते हैं, तो हमें बताएं! :)

— gmazzap

आपका समाधान सर्वर पर लोड बढ़ा सकता है क्योंकि आप सीधे गूंज कर 1 और http अनुरोध कर रहे हैं। समाधान अच्छा है लेकिन अनुकूलित नहीं है।

— फैसल शेख

@FaisalShaikh देखभाल करने के लिए समझा? echoबयान के रूप में जहाँ तक मैं बता सकता है किसी भी HTTP अनुरोध नहीं करता है, और वर्डप्रेस wp_enqueue_scriptमें अच्छी तरह से एक गूंज (देखें करता core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/... ) निश्चित रूप से आप को कम कर सकता स्क्रिप्ट को कुछ अन्य स्क्रिप्ट के साथ जोड़कर आपके अनुरोध की संख्या: लेकिन 1) स्क्रिप्ट्स इस मामले में 3 पार्टी सर्वर में मौजूद हैं 2) HTTP 2 के साथ आजकल स्क्रिप्ट के संयोजन प्रदर्शन को कम कर देंगे, उन्हें नहीं बढ़ाएंगे। तो शायद मुझे कुछ याद है?

— गमजप

@gmazzap आप सही हैं। वास्तव में, मेरे पास ऐसा करने का एक अलग तरीका है। हम इस 3 भाग js को अपने सर्वर में स्टोर कर सकते हैं और मुझे वास्तव में ऐसा नहीं लगता है कि स्क्रिप्ट के संयोजन से सर्वर पर लोड बढ़ सकता है।

— फैसल शेख

Answer 4

ऊपर से बेनेटर्न के उत्तर से। इस कोड ने मेरे लिए काम किया।

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 को फिर से लिख रहा हूं।

Comments

कृपया इसमें कुछ स्पष्टीकरण जोड़ें कि आप क्या बदलते हैं और आपने इसे क्यों बदला (या इसे बदलना पड़ा)।

— tfrommen

मुझे पता है कि यह एक पुरानी प्रतिक्रिया है लेकिन ऊपर दिए गए आपके कोड में, क्या आपका मतलब केवल मूल यूआरएल के बजाय IF कथन के अंदर $ original_url को वापस करना है?

— leromt

Answer 5

मैंने ड्रॉपबॉक्स.जेएस कोड (v2) में कुछ जाँच की कि यह क्या हो रहा है और इसे कैसे हल किया जाए। जैसा कि यह पता चला है, डेटा-ऐप-कुंजी का उपयोग केवल चर Dropbox.appKey को सेट करने के लिए किया जाता है। मैं निम्नलिखित अतिरिक्त लाइन के साथ चर सेट करने में सक्षम हूं।

ड्रॉपबॉक्स पृष्ठ पर जावास्क्रिप्ट उदाहरण का उपयोग करना 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 को हर उस स्थान पर सेट किया है जहाँ मैं ड्रॉपबॉक्स जावास्क्रिप्ट रूटीन का संदर्भ देता हूँ। ऐसा करने से मुझे अतिरिक्त मापदंडों के बिना wp_enqueue_script () का उपयोग करने की अनुमति मिली।

Answer 6

मैंने अपने 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>';

सूचना एपीआई कुंजी एक विकल्प के माध्यम से पारित किया है।

Comments

$ आउटपुट का उपयोग कैसे किया जाता है? गूँजती? Wp_print_scripts () में जोड़ें?

— एंड्रयू बार्टल

यह आपके फ़ंक्शन के आधार पर या तो लौटाया जाता है या गूँजता है।

— सिप्रियन

Answer 7

ऐसा करने का एक सरल तरीका है

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

Answer 8

Script_loader_tag के लिए वर्डप्रेस सिंटैक्स :

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 सही तरीके से बच जाएगा।

Answer 9

सभी पोस्टिंग के लिए धन्यवाद, उन्होंने वास्तव में मदद की। मैंने इसे कुछ संरचना देने और पढ़ने और अद्यतन करने में आसान बनाने के लिए अपने स्वयं के संस्करण को रोल किया। सामान्य रूप से एन्क्यू का उपयोग करें, सीएसएस फ़ाइलों के लिए स्क्रिप्ट का उपयोग एक गलत टैग के साथ अंत में करें ताकि यह शीर्ष पर लोड हो। हालांकि यह शायद कुछ हद तक सरल किया जा सकता है।

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