html 链接，来自 Javascript 函数的 href 分配

发布于 2024-11-27 17:41:45 字数 281 浏览 1 评论 0原文

我有一个简单的 Javascript 函数，它构建了一个我想要提供链接的 URL。

但是，我似乎无法让锚标记与它一起使用。如何将锚标记的 href 分配给 Javascript 函数的结果？

这些都不能正常工作：

<a href="getUrl();">Click here</a>
<a href="javascript:getUrl();">Click here</a>

这就是我想要完成的任务。

原文

I have a simple Javascript function which builds a Url that I want to provide a link to.

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?

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

勿忘初心 2024-12-04 17:41:45

<script type="text/javascript">
    function getUrl()
    {
        return "http://www.google.com";
    }
</script>
<a href="javascript:document.location.href=getUrl();">Click here</a>

-- 更新 --

如果我想合并 user278064s 的评论，我会将上面的内容更改为：

  <script type="text/javascript">
        function getUrl()
        {
            return "http://www.google.com";
        }
    </script>
    <a href="#" onClick="document.location.href=getUrl();">Click here</a>

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

  <script type="text/javascript">
        function getUrl()
        {
            return "http://www.google.com";
        }
    </script>
    <a href="#" onClick="document.location.href=getUrl();">Click here</a>

回复收藏 0 原文

花想c 2024-12-04 17:41:45

上述解决方案都不适合我。一个好方法是在函数中创建一个新链接。

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>

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>

回复收藏 0 原文

浪推晚风 2024-12-04 17:41:45

<a onclick="getUrl();" href="#">Click here</a>

点击此处

<a onclick="getUrl();" href="#">Click here</a>

Click Here

回复收藏 0 原文

蓝礼 2024-12-04 17:41:45

为链接指定一个 id：

<a id="specialLink">Click Here</a>

稍后，通过 JavaScript 设置其 href：（

document.getElementById('specialLink').href = getUrl();

您可能希望在链接中包含一个占位符 href禁用 JavaScript 将会看到。）

Give the link an id:

<a id="specialLink">Click Here</a>

Later on, set its href from JavaScript:

document.getElementById('specialLink').href = getUrl();

(You might want to include a placeholder href in the link which people with JavaScript disabled will see.)

回复收藏 0 原文

庆幸我还是我 2024-12-04 17:41:45

function getUrl(that) {
   return "www.whateveryouwant.com";
}

// Point the a.href attribute at your url.
var a = document.getElementsByTagName('a')[0];
a.href = getUrl();

更新

我假设您想使用 getUrl() 方法来设置 href 属性，因为指向的 url 可能不是静态的（因此它可能随时发生变化）指向 getUrl() 返回的 url。）

无论如何，当用户单击链接时，您可以通过这种方式分配 href 属性。

function changeHref(aElem) {
   aElem.href = getUrl();
}

遵循完整的代码：

<a href="#" onclick="changeHref(this);">click me!</a>

<script>
   function getUrl(that) {
      return "www.whateveryouwant.com";
   }

   function changeHref(aElem) {
      aElem.href = getUrl();
   }
</script>

另一件事。您应该避免使用javascript:pseudo-protocol。

该片段将向您解释原因：

伪协议是对这个想法的非标准理解。
javascript: 伪协议应该用于从链接内调用 JavaScript。
以下是如何使用 javascript: 伪协议来调用 popUp 函数：

<a href="javascript:popUp('http://www.example.com/');">Example</a>

这在理解 javascript: 伪协议的浏览器中可以正常工作。然而，较旧的浏览器将尝试访问该链接并失败。即使在理解伪协议的浏览器中，
如果 JavaScript 被禁用，该链接将变得无用。
简而言之，使用 javascript: 伪协议通常是引用 JavaScript 的一种非常糟糕的方式
从您的标记中。

DOM 脚本：使用 JavaScript 和文档对象模型进行网页设计：第二版

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

Anyway, you could assign the href attribute, when i.e. the user click on the link, in this way.

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.

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:

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

DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition

回复收藏 0 原文

向地狱狂奔 2024-12-04 17:41:45

以下内容对我有用

<script type="text/javascript">
   $(function() {
        document.getElementById("aTag").href = getUrl();
   });
</script>

<a id="aTag">Click Here</a>

The following worked for me

<script type="text/javascript">
   $(function() {
        document.getElementById("aTag").href = getUrl();
   });
</script>

<a id="aTag">Click Here</a>

回复收藏 0 原文

~没有更多了~