将 Javascript 字符串 var 传递给 HTML href 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29163097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing Javascript string var to HTML href tag
提问by Joseph Raphael
Due to limitations, I have to set a URL string on every page header in my website as a JavaScript string variable like this var burl = "http://www.example.com";
由于限制，我必须在我网站的每个页眉上设置一个 URL 字符串作为 JavaScript 字符串变量，如下所示 var burl = "http://www.example.com";
Now, I have to pass this string burlinside an HTML href=""tag in the of my website. I also want to be able to add extra URL elements to the href link beside the burl.
现在，我必须在我的网站burl的 HTMLhref=""标记中传递这个字符串。我还希望能够向 burl 旁边的 href 链接添加额外的 URL 元素。
Here's what the full code look like Javascript + HTML code;
这是完整代码的样子 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>Any help solving this simple issue will be appreciated.
任何解决这个简单问题的帮助将不胜感激。
回答by T.J. Crowder
You can do that in two ways:
您可以通过两种方式做到这一点：
document.writeVia the DOM
document.write通过 DOM
document.write:
document.write：
In a script tag where you want the link:
在您想要链接的脚本标签中：
document.write('<a href="' + burl + '">Open here</a>');
That's processed during the parsing of the page, and replaces the script link with the text you output.
这是在页面解析期间处理的，并将脚本链接替换为您输出的文本。
Live example:
现场示例：
<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 the DOM
通过 DOM
Put an id on the link:
在链接上放一个 id：
<a href="" id="burl">Open here</a>
and then in a script tag afterit
然后在它之后的脚本标签中
document.getElementById("burl").href = burl;
Live example:
现场示例：
<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 your comment:
回复您的评论：
what if...I want to manually add an extra element to each link
<a href="burl-string-here/extra-link-element"
如果...我想手动为每个链接添加一个额外的元素怎么办
<a href="burl-string-here/extra-link-element"
I'd use a data-*attribute (data-extra, whatever) on the links to say what the extra was. Then get the element into a variable, then:
我会在链接上使用一个data-*属性（data-extra，无论如何）来说明额外的内容。然后将元素放入一个变量中，然后：
link.href = burl + link.getAttribute("data-extra");`
I wouldn't put the extra in hrefbecause somebrowsers try to expand hrefeven when you get it via getAttribute(though they shouldn't).
我不会添加额外的内容，href因为即使您通过某些浏览器href获取它getAttribute（尽管它们不应该），也会尝试扩展。
You've said "each link" which makes me think you have a bunch of them. If so, don't use an id, but a classinstead:
你说过“每个链接”，这让我觉得你有一堆链接。如果是这样，请不要使用id, 而是使用a 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>That uses Array#forEachwhich is on all modern browsers, but not (say) IE8. It can be shimmed/polyfilled, though, or you can use a simple forloop. Options in this other answer(see "for array-like objects" as the list we get back from querySelectorAllis array-like).
这Array#forEach在所有现代浏览器上都使用，但不是（比如）IE8。不过，它可以被填充/填充，或者你可以使用一个简单的for循环。这个其他答案中的选项（请参阅“对于类似数组的对象”，因为我们从中获取的列表querySelectorAll是类似数组的）。
回答by Legendary
is it, what u want?
是吗，你想要什么？
$(document).ready(function(){
var burl = "http://www.example.com";
$('a').attr('href', burl);
});
ps using jQuery.
ps 使用 jQuery。
回答by tech-gayan
if you are using jQuery.
如果您使用的是 jQuery。
<script>
$(document).ready(function(){
var burl = "http://www.example.com";
$('a').attr('href',burl )
});
</script>
