क्या एक विशिष्ट स्क्रिप्ट हैंडल के बिना वैश्विक JS वैरिएबल बनाने के लिए wp_localize_script का उपयोग करना संभव है?


27

क्या हम किसी विशिष्ट स्क्रिप्ट हैंडल के बिना ग्लोबल js वैरिएबल बनाने के लिए किसी तरह wp_localize_script () का उपयोग कर सकते हैं, जिसे सभी js फाइलों से एक्सेस किया जा सकता है, भले ही js स्क्रिप्ट्स wp_enecue_script का उपयोग करके ठीक से एंके न हों?

यह वह कोड है जिसका मैं उपयोग कर रहा हूं जो 'ajaxscript' हैंडल के लिए varibale बनाता है, इसलिए मैं किसी js फ़ाइल में ऑब्जेक्ट 'ajaxobject' को एक्सेस नहीं कर सकता, जिसे शीर्ष लेख में शामिल किया जा रहा है। <script src="xxx" .... />

wp_register_script( 'ajaxscript', get_bloginfo( 'template_url' ) . '/js/ajaxscript.js', array(), $version );
wp_enqueue_script( 'ajaxscript' );
wp_localize_script( 'ajaxscript', 'ajaxobject',
    array( 
        'ajaxurl'   => admin_url( 'admin-ajax.php' ),
        'ajaxnonce' => wp_create_nonce( 'itr_ajax_nonce' )
    )
);

5
बस विषय के अंदर अपनी इनलाइन जेएस जोड़ें। wp_localize_scriptवैसे भी ठीक यही करता है। दोनों विधियों के साथ, चर किसी भी स्क्रिप्ट से सुलभ हैं
onetrickpony

3
यदि आप लिपियों के नियंत्रण में हैं, तो आप सिर में एक स्क्रिप्ट के साथ कैसे समाप्त होंगे जिसे ठीक से नहीं लगाया गया था? Wp_localize_script की धारणा यह है कि आप अपनी स्क्रिप्ट को उपलब्ध करा रहे हैं - जिसे आप wp_enqueue_script के साथ ठीक से लोड कर रहे हैं। किस स्थिति में आप जानबूझकर हेडर फ़ाइल में स्क्रिप्ट लोड कर सकते हैं, जिसे इन चर की जरूरत है, बजाय इसे wp_enqueue__cript के माध्यम से लोड करने की?
cale_b

@cale_b: एक स्क्रिप्ट है जो पहले से ही हैडर के अंदर शामिल है। पीएपी और इसमें बहुत सारी स्क्रिप्ट शामिल हैं जो चीजों को तोड़ना शुरू कर देती हैं जब मैं wp_enqueue_script द्वारा उस js फ़ाइल को एनक्यू करने की कोशिश करता हूं। मुझे उस स्क्रिप्ट फ़ाइल से अजाक्स कॉल करने की आवश्यकता है। इसलिए कार्यक्षमता को तोड़ने और एक-एक करके ठीक करने के बजाय मुझे त्वरित समाधान की आवश्यकता थी। यहां तक ​​कि मुझे यकीन नहीं है कि 'wp_enqueue_script' के छोटे परिवर्तन के कारण साइट का कौन सा हिस्सा टूट गया :(
सुभ्रंजन

काफी उचित। बस एक टिप के रूप में, फ़ायरफ़ॉक्स के लिए फायरबग प्राप्त करें, और आप जावास्क्रिप्ट त्रुटियों को देखने / देखने के लिए कंसोल का उपयोग कर सकते हैं। समस्या निवारण के लिए अमूल्य उपकरण।
cale_b

जवाबों:


22

उस स्थिति में wp_localize_script का उपयोग करने के बजाय, आप अपने js चर को wp_head पर हुक कर सकते हैं, इस तरह यह सभी js फ़ाइलों के लिए उपलब्ध होगा:

function my_js_variables(){ ?>
      <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajaxnonce = '<?php echo wp_create_nonce( "itr_ajax_nonce" ); ?>';
      </script><?php
}
add_action ( 'wp_head', 'my_js_variables' )

जैसा कि @Weston Ruter द्वारा सुझाया गया है, आप चर को एन्कोड कर सकते हैं:

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo json_encode( array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}

4
आपको json_encodeयहां उदाहरण के लिए उपयोग करना चाहिए :var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
वेस्टन रटर

ठीक है, मैं इसे अब आगे जोड़ दूंगा
कुमार

12

आप किसी भी डेटा को wp_headहुक में इच्छित निर्यात कर सकते हैं , जैसा कि ऊपर दिए गए उत्तर दिखाते हैं। हालाँकि, आपको json_encodeJS मानों में कच्चे मानों को एम्बेड करने के बजाय JS को निर्यात करने के लिए PHP डेटा तैयार करने के लिए उपयोग करना चाहिए :

function my_js_variables(){
    ?>
    <script>
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ) ?>;
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ) ?>;
    var myarray = <?php echo json_encode( array( 
        'food' => 'bard',
        'bard' => false,
        'quux' => array( 1, 2, 3, ),
    ) ) ?>;
    </script>
    <?php
}
add_action ( 'wp_head', 'my_js_variables' )

उपयोग करना json_encodeअपने आप पर आसान बनाता है, और यह आकस्मिक वाक्यविन्यास त्रुटियों को रोकता है यदि आपकी स्ट्रिंग में कोई उद्धरण चिह्न शामिल है। इससे भी महत्वपूर्ण बात, json_encodethwarts XSS हमलों का उपयोग करना।


1

मैंने ऐसा करना समाप्त कर दिया। यह अब काम करता है !! धन्यवाद @ डॉट १

function itr_global_js_vars() {
    $ajax_url = 'var itrajaxobject = {"itrajaxurl":"'. admin_url( 'admin-ajax.php' ) .'", "itrajaxnonce":"'. wp_create_nonce( 'itr_ajax_nonce' ) .'"};';
    echo "<script type='text/javascript'>\n";
    echo "/* <![CDATA[ */\n";
    echo $ajax_url;
    echo "\n/* ]]> */\n";
    echo "</script>\n";
}
add_action( 'wp_head', 'itr_global_js_vars' );

8
आपको json_encodeमैन्युअल रूप से JSON बनाने के बजाय उपयोग करना चाहिए ।
वेस्टन रटर

मैं json_encodeअब उपयोग कर रहा हूँ :) धन्यवाद @WestonRuter !!
सुभ्रजन

0

हालांकि यह मेरा सबसे अच्छा काम नहीं है, यह प्रतिक्रिया में डेटा डालने का एक और सीधा तरीका है:

<?php

/**
 * Add data to global context.
 *
 * @param string $name
 * @param mixed $value
 * @return mixed|array
 */
function global_js($name = null, $value = null)
{

    static $attached = false;
    static $variables = [];

    if (! $attached) {

        $provide = function () use (&$variables) {

            if (! empty($variables)) {

                echo("<script type=\"text/javascript\">\n\n");

                foreach ($variables as $name => $value) {

                    echo("    window['$name'] = JSON.parse('".json_encode($value)."');\n");
                    unset($variables[$name]);

                }

                echo("\n</script>\n");

            }

        };

        add_action('wp_print_scripts', $provide, 0);
        add_action('wp_print_footer_scripts', $provide, 0);

        $attached = true;

    }

    if (is_null($name) && is_null($value)) {
        return $variables;
    }

    return $variables[$name] = $value;

}

विंडो संदर्भ में कुछ JS डेटा जोड़ें:

<?php

global_js('fruits', ['apple', 'peach']);

// produces: `window['fruits'] = JSON.parse('["apple", "peach"]');`

यह हेडर लिपियों या पाद लेखों के लिए काम करेगा और खुद को दोहराएगा नहीं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.