เป็นไปได้หรือไม่ที่จะใช้ wp_localize_script เพื่อสร้างตัวแปร JS ทั่วโลกโดยไม่มีการจัดการสคริปต์ที่เฉพาะเจาะจง?


27

เราสามารถใช้ wp_localize_script () เพื่อสร้างตัวแปร js ทั่วโลกโดยไม่มีการจัดการสคริปต์ที่เฉพาะเจาะจงซึ่งสามารถเข้าถึงได้จากไฟล์ js ทั้งหมดแม้ว่าสคริปต์ js จะไม่ถูกจัดคิวอย่างเหมาะสมโดยใช้ wp_enqueue_script หรือไม่

นี่คือรหัสที่ฉันใช้ซึ่งสร้าง varibale สำหรับ 'ajaxscript' หมายเลขอ้างอิงดังนั้นฉันไม่สามารถเข้าถึงวัตถุ 'ajaxobject' ในไฟล์ js ซึ่งถูกรวมอยู่ใน header.php โดยตรงโดย <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
เพียงเพิ่ม JS แบบอินไลน์ของคุณภายในธีม นั่นคือสิ่งที่wp_localize_scriptทำอยู่แล้ว ด้วยวิธีทั้งสองตัวแปรสามารถเข้าถึงได้จากสคริปต์ใด ๆ
onetrickpony

3
หากคุณเป็นผู้ควบคุมสคริปต์คุณจะลงเอยด้วยสคริปต์ในส่วนหัวที่ไม่ได้จัดคิวอย่างเหมาะสมได้อย่างไร ความคิดของ wp_localize_script คือคุณใช้สคริปต์ของคุณซึ่งโหลดได้อย่างถูกต้องด้วย wp_enqueue_script คุณจะโหลดสคริปต์อย่างรู้เท่าทันในไฟล์ส่วนหัวที่ต้องการตัวแปรเหล่านี้แทนที่จะโหลดผ่าน wp_enqueue_script หรือไม่
cale_b

@cale_b: มีสคริปต์ที่รวมอยู่ใน header.php แล้วและมันมีสคริปต์มากมายที่เริ่มทำลายสิ่งต่าง ๆ เมื่อฉันพยายามจัดคิวไฟล์ js โดย wp_enqueue_script ฉันต้องทำการโทร ajax จากไฟล์สคริปต์นั้น ดังนั้นแทนที่จะทำลายฟังก์ชันการทำงานและแก้ไขทีละรายการฉันต้องการโซลูชันที่รวดเร็ว แม้ฉันไม่แน่ใจว่าส่วนใดของเว็บไซต์ที่หยุดพักเนื่องจากการเปลี่ยนแปลงเล็กน้อยของ 'wp_enqueue_script' :(
Subharanjan

ยุติธรรมพอสมควร ขอแนะนำให้ใช้ Firebug สำหรับ Firefox และคุณสามารถใช้คอนโซลเพื่อดู / ดูข้อผิดพลาดจาวาสคริปต์ เครื่องมือที่ทรงคุณค่าสำหรับการแก้ไขปัญหา
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 คุณสามารถ json เข้ารหัสตัวแปร:

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" ) ); ?>;
Weston Ruter

ไม่เป็นไรฉันจะเพิ่มตอนนี้เป็นต้นไป
Kumar

12

คุณสามารถส่งออกข้อมูลใด ๆ ที่คุณต้องการในwp_headเบ็ดตามคำตอบข้างต้นแสดง อย่างไรก็ตามคุณควรใช้json_encodeเพื่อเตรียมข้อมูล PHP สำหรับส่งออกไปยัง JS แทนที่จะพยายามฝังค่าดิบลงในตัวอักษร JS:

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_encodeการโจมตีแบบ XSS


1

ในที่สุดฉันก็ลงมือทำสิ่งนี้ มันใช้งานได้แล้ว !! ขอบคุณ @ dot1

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 ด้วยตนเอง
Weston Ruter

ฉันใช้json_encodeอยู่ตอนนี้ :) ขอบคุณ @WestonRuter !!
Subharanjan

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"]');`

สิ่งนี้จะใช้ได้กับสคริปต์ส่วนหัวหรือสคริปต์ส่วนท้ายและจะไม่ทำซ้ำตัวเอง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.