web-dev-qa-db-ja.com

JavaScript文字列varをHTML hrefタグに渡す

制限のため、私のWebサイトのすべてのページヘッダーに、次のようなJavaScript文字列変数としてURL文字列を設定する必要がありますvar burl = "http://www.example.com";

今、私はこの文字列burlを私のウェブサイトのHTML href=""タグ内に渡す必要があります。また、バールの横にあるhrefリンクにURL要素を追加できるようにしたいと考えています。

完全なコードはJavascript + 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>

この簡単な問題を解決するための助けがあれば高く評価されます。

javascripthtmlvariableshref
6
Joseph Raphael

これは、次の2つの方法で実行できます。

  • document.write

  • DOM経由

document.write：

リンクが必要なスクリプトタグ：

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

これはページの解析中に処理され、スクリプトリンクを出力したテキストに置き換えます。

ライブの例：

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

DOM経由

リンクにIDを付けます。

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

そして、スクリプトタグの後で

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

ライブの例：

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

あなたのコメントを再：

どうしたら...各リンクに手動で余分な要素を追加したい<a href="burl-string-here/extra-link-element"

data-*属性（data-extra、何でも）リンク上で、余分なものは何かを言います。次に、要素を変数に入れ、次に：

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

someブラウザーはhrefを展開しようとするので、hrefに余分を入れません。 getAttribute（すべきではありませんが）。

あなたはそれらをたくさん持っていると私に思わせる「各リンク」を言った。その場合は、idではなく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>

Array#forEachこれはすべての最新のブラウザにありますが、IE8には（たとえば）ありません。ただし、シム/ポリフィルすることも、単純なforループを使用することもできます。 この他の答え のオプション（querySelectorAllから返されるリストは配列のようなものなので、「配列のようなオブジェクトの場合」を参照してください）。

8
T.J. Crowder

それは何ですか？

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

jQueryを使用するps。

1
Legendary

jQueryを使用している場合。

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