将Javascript字符串var传递给HTML href标记

Passing Javascript string var to HTML href tag

本文关键字：HTML href 标记 Javascript 字符串 var      更新时间：2023-09-26

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

现在，我必须在我的网站的HTML href=""标记中传递这个字符串burl。我还希望能够在伯尔旁边的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>

如有任何帮助解决这个简单的问题，我们将不胜感激。

您可以通过两种方式实现：

  • 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");`

我不会在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循环。另一个答案中的选项（请参阅"for array-like objects"，因为我们从querySelectorAll返回的列表是array-like）。

这是你想要的吗？ 
$(document).ready(function(){
  var burl = "http://www.example.com";
  $('a').attr('href', burl); 
});

ps使用jQuery。

如果您使用的是jQuery。

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