将 Javascript 字符串变量传递给 HTML href 标签

Question

由于限制，我必须在我网站的每个页眉上设置一个 URL 字符串作为 JavaScript 字符串变量，如下所示 var burl = "http://www.example.com";

现在，我必须将此字符串 burl 传递到我网站的 HTML href="" 标记内。我还希望能够向树瘤旁边的 href link 添加额外的 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>

任何解决这个简单问题的帮助都将不胜感激。

Answer 1

您可以通过两种方式做到这一点：

document.write
通过DOM

`document.write`:

在您想要 link:

的脚本标记中

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

这是在页面解析期间处理的，并将脚本 link 替换为您输出的文本。

实例：

<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

在 link 上添加一个 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>

回复您的评论：

what if...I want to manually add an extra element to each link <a href="burl-string-here/extra-link-element"

我会在 link 上使用 data-* 属性（data-extra，随便什么）来说明额外内容是什么。然后把元素取到一个变量中，然后：

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

我不会在 href 中添加额外内容，因为某些浏览器会尝试扩展 href，即使您通过 getAttribute 获取它也是如此（尽管他们不应该这样做）。

你说 "each link" 这让我觉得你有很多。如果是这样，请不要使用 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。不过，它可以是 shimmed/polyfilled，或者您可以使用简单的 for 循环。 this other answer 中的选项（请参阅 "for array-like objects"，因为我们从 querySelectorAll 返回的列表类似于数组）。

Answer 2

是吗，你想要什么？

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

ps 使用 jQuery.

Answer 3

如果您正在使用 jQuery。

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

将 Javascript 字符串变量传递给 HTML href 标签

Passing Javascript string var to HTML href tag

html

javascript

variables

href

`document.write`:

通过DOM

将 Javascript 字符串变量传递给 HTML href 标签

Passing Javascript string var to HTML href tag

html

javascript

variables

href

document.write:

通过DOM

`document.write`: