web-dev-qa-db-fra.com

Passer la chaîne Javascript var to HTML href tag

En raison de limitations, je dois définir une chaîne URL sur chaque en-tête de page de mon site Web en tant que variable chaîne JavaScript telle que celle-ci var burl = "http://www.example.com";

Maintenant, je dois passer cette chaîne burl à l'intérieur d'une balise HTML href="" dans le de mon site Web. Je veux aussi pouvoir ajouter des éléments URL supplémentaires au lien href à côté de la loupe.

Voici à quoi ressemble le code complet Javascript + code HTML; 

<script>
var burl = "http://www.example.com";
</script>
<html>
<head>
</head>
<body>

<h1>JavaScript Variables</h1>

<p>the href below should link to http://www.example.com</p>

<a href="{burl-string-here}/blog/article/">Open Here</a>

</body>
</html>

Toute aide pour résoudre ce problème simple sera appréciée.

javascripthtmlvariableshref
4
Joseph Raphael

Vous pouvez le faire de deux manières:

  • document.write

  • Via le DOM

document.write:

Dans une balise de script où vous voulez le lien:

document.write('<a href="' + burl + '">Open here</a>');

Celle-ci est traitée lors de l'analyse de la page et remplace le lien de script par le texte que vous avez généré.

Exemple en direct:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<script>
document.write('<a href="' + burl + '">Open Here</a>');
</script>
<p>this is after the link</p>

Via le DOM

Mettez un identifiant sur le lien:

<a href="" id="burl">Open here</a>

puis dans une balise de script after it

document.getElementById("burl").href = burl;

Exemple en direct:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<a href="" id="burl">Open Here</a>
<p>this is after the link</p>
<script>
document.getElementById("burl").href = burl;
</script>

Re votre commentaire:

et si ... Je veux ajouter manuellement un élément supplémentaire à chaque lien <a href="burl-string-here/extra-link-element"

J'utiliserais un attribut data-* (data-extra, peu importe) sur les liens pour dire ce que cet extra était. Ensuite, obtenez l'élément dans une variable, puis:

link.href = burl + link.getAttribute("data-extra");`

Je ne mettrais pas l'extra dans href parce que some les navigateurs tentent de développer href même lorsque vous l'obtenez via getAttribute (bien qu'ils ne devraient pas le faire).

Vous avez dit "chaque lien", ce qui me fait penser que vous en avez plusieurs. Si c'est le cas, n'utilisez pas une id, mais plutôt une class:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<p><a href="" class="burl" data-extra="/first">First link</a></p>
<p><a href="" class="burl" data-extra="/second">Second link</a></p>
<p><a href="" class="burl" data-extra="/third">Third link</a></p>
<p>this is after the link</p>
<script>
(function() {
  Array.prototype.forEach.call(document.querySelectorAll("a.burl"), function(link) {
    link.href = burl + link.getAttribute("data-extra");
  });
})();
</script>

Cela utilise Array#forEach qui est sur tous les navigateurs modernes, mais pas (disons) IE8. Il peut cependant être calé/rempli, ou vous pouvez utiliser une simple boucle for. Options dans cette autre réponse (voir "pour les objets de type tableau" car la liste que nous obtenons de querySelectorAll est de type tableau).

8
T.J. Crowder

est-ce que tu veux?

$(document).ready(function(){
  var burl = "http://www.example.com";
  $('a').attr('href', burl); 
});

ps en utilisant jQuery.

1
Legendary

si vous utilisez jQuery.

 <script>
$(document).ready(function(){
  var burl = "http://www.example.com";
  $('a').attr('href',burl )
});
</script>
0
tech-gayan