Un moyen efficace de passer des variables de PHP à JavaScript

De temps en temps, je dois transmettre certaines variables de PHP à JS script. Pour l'instant, je l'ai fait comme ça:

var js-variable = "<?php echo $php-variable; ?>"; 

Mais c'est très moche et je ne peux pas cacher mon script JS dans le fichier .js car il doit être analysé par PHP. Quelle est la meilleure solution pour gérer cela?

    Si vous ne souhaitez pas utiliser PHP pour générer votre javascript (et ne pensez pas à l'appel supplémentaire à votre serveur web), utilisez AJAX pour récupérer les données.

    Si vous souhaitez utiliser PHP, encodez toujours avec json_encode avant de sortir.

     <script> var myvar = <?php echo json_encode($myVarValue); ?>; </script> 

    Utilisez un repos / rpc api et passe json à votre js. Cela peut se faire de la manière suivante si vous utilisez jquery:

    Rest.php

     <?php echo "{name:biplav}" ?> 

    Ensuite, à partir de votre js, faites un appel comme ceci:

     var js_var; $.get("rest.php", function(data) { js_var=data; }); 

    C'est l'exemple le plus simple que je puisse imaginer.

     <?php header('content-type:text/javascript;charset=utf-8'); printf('var foo = %s;', json_encode($foo, JSON_PRETTY_PRINT)); 

    json_encode garantit un javascript valide. L'en-tête indique au navigateur de l'interpréter comme javascript.

    Alors vous pouvez lier à cela comme un fichier:

     <script src="script.php"></script> 

    Alternativement, il est pratique d'intégrer directement la valeur dans votre html au lieu de faire une requête HTTP distincte. Faites-le comme si:

     <script> <?php printf('var foo = %s;', json_encode($foo, JSON_HEX_TAG | JSON_PRETTY_PRINT)) ?> </script> 

    Assurez-vous d'utiliser JSON_HEX_TAG si vous l' JSON_HEX_TAG dans votre html, sinon vous risquez des attaques par injection xss. Il existe également d'autres drapeaux dont vous devrez utiliser pour plus de sécurité en fonction du contexte dans JSON_HEX_AMP, JSON_HEX_QUOT, JSON_HEX_APOS vous l'utilisez: JSON_HEX_AMP, JSON_HEX_QUOT, JSON_HEX_APOS

    À mon avis, si vous devez passer une variable directement dans votre JS, probablement votre application Web n'est pas bien conçue.

    Donc, j'ai deux conseils: * Utilisez les fichiers JSON pour les configurations générales, comme /js/conf/userprefs.json

     { "avatar": "/img/users/123/avatar.jpg", "preferred_color": "blue" // ... } 
    • Ou (mieux), vous pouvez récupérer votre json confs avec un appel AJAX.

    Avec des frameworks PHP comme Symfony2, vous pouvez décider d'un format dans votre configuration de routage laissant la sortie d'une variable au moteur de modèle (comme Twig).

    Je fais un exemple pour les utilisateurs de Symfony2, mais cela peut être utilisé par n'importe quel programmeur:

    Routing.yml

     userprefs: pattern: /js/confs/userprefs.{_format} defaults: { _controller: CoreBundle:JsonPrefs:User, _format: json } requirements: _format: json _method: GET 

    À l'intérieur du contrôleur, vous pouvez effectuer toutes les requêtes dont vous avez besoin pour récupérer vos variables en les mettant dans la vue:

    Ressources / Vues / JsonPrefs / User.json

     { "avatar": "{{ user.avatar }}", "preferred_color": "{{ user.preferred_color }}" // ... } 

    À l'intérieur de votre JS, vous pourrez maintenant récupérer le JSON avec un simple appel AJAX. À des fins de performance, vous pouvez mettre en cache les JSON (par exemple) avec du vernis. De cette façon, votre serveur n'a pas besoin de faire une requête chaque fois que vous lisez les préférences de l'utilisateur.

    Si vous modifiez votre fichier .htaccess pour inclure

      AddType application/x-httpd-php .js 

    Vous pouvez utiliser un fichier .js et il sera traité par PHP, ce qui représente la moitié de ce dont vous avez besoin.

    Pour ce qui est de la faiblesse de cette solution, je dirais que c'est le mécanisme le moins moche. Vous pouvez essayer de passer votre script JS entier à travers un script PHP en tant que chaîne et faire une recherche et remplacer les variables que vous devez insérer, mais je pense que vous conviendrez que cela est plus laid que la solution que vous utilisez actuellement.

    Mettez tous vos fichiers .js dans un dossier et configurez votre serveur HTTP pour rediriger toute la demande vers ces fichiers vers un fichier PHP qui charge les fichiers et les exécute.

    Supposons que vous disposiez d'Apache et que vos fichiers .js sont dans / js:

     RewriteRule /js /getjs.php 

    Getjs.php:

     <?php header('Content-Type: text/javascript'); include_once($_SERVER['SCRIPT_NAME']); ?> 

    En ce qui concerne l'évitement d'exécuter des fichiers .js via l'analyseur PHP, il y a peu que vous pouvez faire, sauf peut-être récupérer la valeur de js-variable via un appel AJAX.

    Aussi, vous pouvez envisager de publier la valeur comme ceci:

     var js_variable = <?php echo json_encode ($php_variable); ?> 

    Pour échapper à toutes les choses qui rompraient votre javascript.

    À tout le moins, vous pouvez utiliser un code court de PHP pour rendre votre solution «moche» un peu plus propre:

     var js-variable = "<?= $php-variable ?>";