html 链接，来自 Javascript 函数的 href 分配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6946204/
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
html link, href assignment from a Javascript function
提问by Mike
I have a simple Javascript function which builds a Url that I want to provide a link to.
我有一个简单的 Javascript 函数，它构建了一个我想提供链接的 Url。
However, I can't seem to get the anchor tag working with it. How do I assign the href of the anchor tag the results of the Javascript function?
但是，我似乎无法使用锚标记。如何将锚标记的 href 分配给 Javascript 函数的结果？
Neither one of these work correctly:
这些都不能正常工作：
<a href="getUrl();">Click here</a>
<a href="javascript:getUrl();">Click here</a>
This is what I want to accomplish.
这就是我想要完成的。
回答by micha
<script type="text/javascript">
function getUrl()
{
return "http://www.google.com";
}
</script>
<a href="javascript:document.location.href=getUrl();">Click here</a>
-- update --
- 更新 -
If I wanted to incorporate user278064s' comments, i would change the above into:
如果我想合并 user278064s 的评论，我会将以上更改为：
<script type="text/javascript">
function getUrl()
{
return "http://www.google.com";
}
</script>
<a href="#" onClick="document.location.href=getUrl();">Click here</a>
回答by Shan Eapen Koshy
None of the above solutions worked for me. A good way would be to create a new link in the function.
以上解决方案都不适合我。一个好方法是在函数中创建一个新链接。
function fetchURL() {
var title = "Download";
var URL = title.link("https://www.google.com");
document.getElementById("dynamicButton").innerHTML = URL;
}<body onload="fetchURL()">
<div id="dynamicButton">
//empty
</div>回答by RBN
The following worked for me
以下对我有用
<script type="text/javascript">
$(function() {
document.getElementById("aTag").href = getUrl();
});
</script>
<a id="aTag">Click Here</a>
回答by AlexC
回答by s4y
Give the link an id:
给链接一个id：
<a id="specialLink">Click Here</a>
Later on, set its hreffrom JavaScript:
稍后，href从 JavaScript设置它：
document.getElementById('specialLink').href = getUrl();
(You might want to include a placeholder hrefin the link which people with JavaScript disabled will see.)
（您可能希望href在链接中包含一个占位符，禁用 JavaScript 的人将看到该占位符。）
回答by user278064
function getUrl(that) {
return "www.whateveryouwant.com";
}
// Point the a.href attribute at your url.
var a = document.getElementsByTagName('a')[0];
a.href = getUrl();
UPDATE
更新
I assume that you want to use the getUrl()method to set the href attribute, because probably the pointed url is not static (so it could change at any moment e point to the getUrl() returned url.)
我假设您想使用该getUrl()方法来设置 href 属性，因为可能指向的 url 不是静态的（因此它可以随时更改 e 指向 getUrl() 返回的 url。）
Anyway, you could assign the href attribute, when i.e. the user click on the link, in this way.
无论如何，您可以通过这种方式分配 href 属性，即当用户单击链接时。
function changeHref(aElem) {
aElem.href = getUrl();
}
Following the complete code:
按照完整的代码：
<a href="#" onclick="changeHref(this);">click me!</a>
<script>
function getUrl(that) {
return "www.whateveryouwant.com";
}
function changeHref(aElem) {
aElem.href = getUrl();
}
</script>
One other thing. You should avoid the use of javascript: pseudo-protocol.
另一件事。您应该避免使用javascript: pseudo-protocol.
This fragment will explain you why:
该片段将向您解释原因：
A pseudo-protocol is a nonstandard take on this idea. The javascript: pseudo-protocol is supposed to be used to invoke JavaScript from within a link. Here's how the javascript: pseudo-protocol would be used to call the popUp function:
伪协议是对这个想法的非标准理解。javascript: 伪协议应该用于从链接中调用 JavaScript。下面是如何使用 javascript: 伪协议来调用 popUp 函数：
<a href="javascript:popUp('http://www.example.com/');">Example</a>
This will work just fine in browsers that understand the javascript: pseudo-protocol. Older browsers, however, will attempt to follow the link and fail. Even in browsers that understand the pseudoprotocol, the link becomes useless if JavaScript has been disabled. In short, using the javascript: pseudo-protocol is usually a very bad way of referencing JavaScript from within your markup.
这将在理解 javascript: 伪协议的浏览器中正常工作。但是，较旧的浏览器将尝试访问该链接并失败。即使在理解伪协议的浏览器中，如果 JavaScript 被禁用，链接也会变得无用。简而言之，使用 javascript: 伪协议通常是从标记中引用 JavaScript 的一种非常糟糕的方式。
DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition
DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition
