Question

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

现在，我必须在我的网站的HTML burl标记内传递此字符串href=""。我还希望能够在burl旁边的href链接中添加额外的URL元素。

以下是完整代码的Javascript + HTML代码;

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以通过两种方式实现这一目标：

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。但它可以是shimmed / polyfilled，或者您可以使用简单的for循环。 this other answer中的选项（请参阅“对于类似数组的对象”，因为我们从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字符串var传递给HTML href标记

3 个答案:

`document.write`

通过DOM