Passage de variables Javascript dans l'URL

Question

J'essaie de transmettre une variable javascript à une page php via l'URL. Le code ci-dessous déclenche la page php mais il ne reçoit pas la variable. J'ai écrit le code en utilisant window.location.href et cela fonctionne bien, le problème est qu'en procédant de cette manière, la page tracker.php est chargée.

Voici mon code.

<script type="text/javascript">
var siteId = "VT0013";
</script>
<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId="+ siteId ;> 
</script>

Page PHP

$siteId = $_GET["siteId"];

Une fois que j'ai obtenu le siteId, j'envoie le résultat par courriel à titre de test ; cela fonctionne bien, sauf que je n'obtiens pas la valeur du siteId. En utilisant ce même code avec window.location.href, tout fonctionne bien.

Answer 1

Je suppose que puisque cela s'appelle tracker.php vous avez juste besoin de cliquer sur cette URL ? Si c'est le cas, envisagez d'utiliser la fonction API de balise .

navigator.sendBeacon('https://example.com/tracker.php' {
  siteId: 'VT0013'
});

Cela entraîne une requête HTTP POST, mais c'est généralement mieux pour cela de toute façon. Vous n'aurez pas à vous soucier de la mise en cache. De plus, l'API Beacon fonctionnera toujours même si la requête n'est pas terminée et que la page est en cours de déchargement.

Si vous souhaitez charger dynamiquement le JavaScript, vous pouvez utiliser la méthode suivante import() .

const siteId = 'VT0013';
await import (`https://example.com/tracker.php?siteId${encodeURIComponent(siteId)}`);

Enfin, si vous avez besoin de charger dynamiquement ce JavaScript et que le script doit s'exécuter dans le contexte du reste de la page (c'est-à-dire qu'il ne s'agit pas d'un module), alors la meilleure chose à faire est d'injecter une nouvelle balise script : https://stackoverflow.com/a/8578840/362536

Quoi que vous fassiez, assurez-vous que vous échappez les données utilisées dans vos URL et dans votre HTML.

Answer 2

Vous pouvez simplement faire une demande XHR rapide si vous voulez un support de navigateur plus ancien sans polyfill :

var siteId = 'VT0013'; 
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

xhr.open('GET', 'http://www.domainame.com/tracker.php?siteId=' + encodeURIComponent(siteId));
xhr.send();

C'est juste une solution alternative, la réponse de @Brad devrait être acceptée.

Answer 3

Vous devez utiliser document.write pour écrire tout HTML qui contient des variables JavaScript :

<script type="text/javascript">
var siteId = "VT0013";
document.write('<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId='+encodeURIComponent(siteId)+'">
<\/script>')
</script>

C'est l'équivalent d'écrire

<script type="text/javascript">
var siteId = "VT0013";
</script>
<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId=VT0013"></script>

Modifié pour échapper correctement à la variable JavaScript.

Veuillez noter qu'il n'est pas conseillé d'utiliser document.write pour charger les scripts d'un domaine tiers car Google Chrome pourrait choisir de ne pas charger le scripts si la connexion est trop lente. Voir https://developers.google.com/web/updates/2016/08/removing-document-write .

Si le script peut être chargé de manière asynchrone, je recommande plutôt cette méthode car elle ne ralentira pas l'analyseur HTML :

<script>
var siteId = "VT0013";
(function(d, s){
    s = d.createElement("script");
    s.src = "http://www.domainame.com/tracker.php?siteId="+encodeURIComponent(siteId);
    d.getElementsByTagName("head")[0].appendChild(s);
})(document)
</script>