Ist es möglich, mit wp_localize_script globale JS-Variablen ohne ein bestimmtes Skripthandle zu erstellen?

27

Können wir irgendwie wp_localize_script () verwenden, um globale js-Variablen ohne ein bestimmtes Skript-Handle zu erstellen, auf das von allen js-Dateien aus zugegriffen werden kann, selbst wenn die js-Skripte mit wp_enqueue_script nicht ordnungsgemäß in die Warteschlange gestellt wurden?

Dies ist der Code, den ich verwende, um varibale für das 'Ajaxscript'-Handle zu erstellen, sodass ich nicht auf das Objekt' Ajaxobject 'in einer js-Datei zugreifen kann, die direkt von in die header.php aufgenommen wird <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' )
    )
);
Subharanjan
quelle
5
Fügen Sie einfach Ihre Inline-JS in das Thema ein. Genau das wp_localize_scriptmacht sowieso. Mit beiden Methoden können die Variablen von jedem Skript aus
aufgerufen werden
3
Wenn Sie die Kontrolle über die Skripte haben, wie würden Sie am Ende ein Skript im Kopf haben, das nicht ordnungsgemäß in die Warteschlange gestellt wurde? Die Idee von wp_localize_script ist, dass Sie Ihr Skript zur Verfügung stellen - das Sie ordnungsgemäß mit wp_enqueue_script laden. In welchem ​​Fall würden Sie das Skript wissentlich in die Header-Datei laden, die diese Variablen benötigt, anstatt es über wp_enqueue_script zu laden?
cale_b
@cale_b: Es gibt ein Skript, das bereits in header.php enthalten ist, und es enthält viele Skripte, die Probleme verursachen, wenn ich versuche, diese js-Datei mit wp_enqueue_script in die Warteschlange zu stellen. Ich muss einen Ajax-Aufruf in dieser Skriptdatei ausführen. Anstatt die Funktionalität zu unterbrechen und eine nach der anderen zu reparieren, brauchte ich eine schnelle Lösung. Sogar ich bin nicht sicher, welcher Teil der Seite wegen der kleinen Änderung von 'wp_enqueue_script' kaputt geht :(
Subharanjan 21.10.13
Meinetwegen. Holen Sie sich als Tipp Firebug für Firefox, und verwenden Sie die Konsole, um Javascript-Fehler anzuzeigen / anzuzeigen. Wertvolles Tool zur Fehlerbehebung.
cale_b

Antworten:

22

Anstatt in diesem Fall wp_localize_script zu verwenden, können Sie Ihre js-Variablen in wp_head einbinden, sodass sie für alle js-Dateien verfügbar sind, z.

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

Wie von @Weston Ruter vorgeschlagen, können Sie die Variablen auch json-codieren:

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
}
Kumar
quelle
4
Sie sollten json_encodehier zum Beispiel verwenden:var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;
Weston Ruter
Gut, ich werde es jetzt hinzufügen
Kumar
12

Sie können alle gewünschten Daten in den wp_headHook exportieren , wie die obigen Antworten zeigen. Sie sollten json_encodejedoch die PHP-Daten für den Export nach JS vorbereiten, anstatt zu versuchen, Rohwerte in JS-Literale einzubetten:

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

Das Verwenden von json_encodeerleichtert Ihnen die Arbeit und verhindert versehentliche Syntaxfehler, wenn Ihre Zeichenfolge Anführungszeichen enthält. Noch wichtiger ist es, json_encodeXSS-Angriffe zu vereiteln.

Weston Ruter
quelle
1

Am Ende habe ich das getan. Es funktioniert jetzt !! Vielen Dank @ 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' );
Subharanjan
quelle
8
Sie sollten json_encodeJSON verwenden, anstatt es manuell zu erstellen.
Weston Ruter
Ich benutze json_encodejetzt :) Danke @WestonRuter !!
Subharanjan
0

Dies ist zwar nicht meine beste Arbeit, aber eine weitere einfache Möglichkeit, Daten in die Antwort einzufügen:

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

}

Fügen Sie dem Fensterkontext einige JS-Daten hinzu:

<?php

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

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

Dies funktioniert entweder für die Kopf- oder Fußzeilenskripte und wiederholt sich nicht.

Erutan409
quelle