如何从href调用javascript？

Posted 2023-03-05

【中文标题】如何从href调用javascript？

【英文标题】：How to call javascript from a href?

【发布时间】：2013-04-26 14:51:27

【问题描述】：

喜欢：

<a href="<script type='text/javascript'>script code</script>/">Call JavaScript</a>

【问题讨论】：

***.com/questions/1070760/…

除非有令人信服的理由，否则最好将 用于此类事情。

【参考方案1】：

<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>

** 编辑 **从一连串的 cmets 中，我分享给定/找到的资源。

以前的 SO Q 和 A：

Do you ever need to specify 'javascript:' in an onclick?（以及IE相关A的关注） javascript function in href vs onclick

有趣的读物：

http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label

【讨论】：

是否需要 onclick 中的 javascript: 前缀...？

@Dawson - onclick 属性中不需要javascript:。

当然...如果您绝对肯定 JavaScript 是可用的。我不喜欢依赖客户端。我不喜欢依赖知道如何在 UI 中做任何事情的人（计划最低的公分母——即使它是访问者的智慧）。

@Dawson 如果没有 Js，onclick 属性完全 nothing。真的不需要javascript: 前缀。

@PhonicUK -- 也许这对我来说是一些老派的传承。那是什么时候消失的？或者它曾经是真正的要求吗？这是跨浏览器兼容性的事情吗？我想都没想就把“javascript:”扔到它上面……我的意思是——我没有养成这个习惯，因为我认为这是“一个好主意”

【参考方案2】：

<a href="javascript:call_func();">...</a>

函数必须返回 false 以使浏览器不会转到另一个页面。

但我建议使用 jQuery（使用 $(...).click(function () ))）

【讨论】：

一个链接。一页。添加一个 JS 库？在 JQuery 之前，我们都有工作。当 JQuery 被遗忘时，我们都会有工作。

@Dawson 在 jQuery 之前我没有编写任何代码 ;-) ...但在我看来，JQ 似乎不会很快被遗忘...也许十年后？也许当有更好的选择时......

我明白了。但这就是重点。这个问题不需要图书馆。 10 年前就可以用同样的方式提问和回答。

@Dawson 那么你也可以问：如果规范不再支持 JS 怎么办？一个库可以通过解析和转换它然后评估来替换遗留的 JS 代码。 — 一旦你的服务器上有一个工作版本，库代码就会工作。

我不想在这里成为魔鬼的拥护者。该问题被标记为 [javascript] 和 [html]。 JQuery 不是 JavaScript 的同义词。这是我“反对”使用图书馆的最大原因。我意识到在当今的 Web 开发世界中，可能正在使用 JQuery 或类似的东西。

【参考方案3】：

单击链接时调用 javascript 代码的正确方法是添加 onclick 处理程序：

<a href="#" onclick="myFunction()">LinkText</a>

虽然一个更“更合适”的方法是在加载 dom 时将其全部从 html 中取出，并使用另一个 javascript 添加处理程序。

【讨论】：

这是不好的做法。应该是<a href="javascript:void(0)" onClick="myFunction">LinkText</a>

【参考方案4】：

JavaScript 代码通常从链接的onclick 事件中调用。例如，您可以改为：

在 HTML 文档的头部

<script type='text/javascript'>
function myFunction()
//...script code

</script>

在 HTML 文档正文中

<a href="#" id="mylink" onclick="myFunction(); return false">Call JavaScript </a>

或者，您也可以使用链接的 ID、HTML DOM 或 JQuery 等框架将函数附加到链接。

例如：

在 HTML 文档的头部

<script type='text/javascript'>
document.getElementById("mylink").onclick = function myFunction() ...script code;
</script>

在 HTML 文档正文中

<a href="#" id="mylink">Call JavaScript </a>

【参考方案5】：

使用 JQuery 会很好；

<a href="#" id="youLink">Call JavaScript </a>



$("#yourLink").click(function(e)
//do what ever you want...
);

【讨论】：

仅供参考 - 我猜你的票数下降了，因为这个问题可能在 1997 年发布。当时有一个解决方案；然而，JQuery 并不存在。

我不是。我是说，这个解决方案不需要 JS 库。您的评论表明，如果 JQ 不在，网络将会崩溃。

你假设太多，我不建议没有其他解决方案。我只是说会很好。

我不是。这个问题甚至被标记为“javascript”“html”。我没有做任何假设。我使用问题/标签的要求来制定我的答案。

那么好。 JQuery 是 Python 库之一，而不是 Javascript。

【参考方案6】：

我会完全避免使用内联 javascript，正如我在评论中提到的，我也可能为此使用 <input type="button" />。话说……

<a href="http://***.com/questions/16337937/how-to-call-javascript-from-a-href" id="mylink">Link.</a>

---

var clickHandler = function() 
     alert('Stuff happens now.');   



if (document.addEventListener) 
    document.getElementById('mylink').addEventListener('click', clickHandler, false);
 else 
    document.getElementById('mylink').attachEvent('click', clickHandler);

---

http://jsfiddle.net/pDp4T/1/

【参考方案7】：

不知道为什么这对我有用，而其他没有，但以防万一其他人仍在寻找......

在头部标签之间：

<script>
     function myFunction() 
           script code
     
</script>

那么对于标签：

<a href='' onclick='myFunction()' > Call Function </a>

【参考方案8】：

 <a href="javascript:
  console.dir(Object.getOwnPropertyDescriptors(HTMLDivElement))">
       1. Direct Action Without Following href Link
  </a>

<br><br>

  <a href="javascript:my_func('http://diasmath.blogg.org')">
      2. Indirect Action (Function Call) Without Following Normal href Link
  </a>

<br><br>

 <!-- Avec « return false » l'action par défaut de l'élément
 // <a></a> (ouverture de l'URL pointée par
 // « href="http://www.centerblog.net/gha" »)
 // ne s'exécute pas.
 -->
 <a target=_new href="http://www.centerblog.net/gha"
          onclick="my_func('http://diasmath.blogg.org');
 return false">
     3. Suivi par défaut du Lien Normal href Désactivé avec
     « return false »
  </a>

<br><br>

 <!-- Avec ou sans « return true » l'action par défaut de l'élément
 // s'exécute pas.
 -->
 <a target=_new href="http://gha.centerblog.net"
          onclick="my_func('http://diasmath.blogg.org');">
     4. Suivi par défaut du Lien Normal href Conservé avec ou sans
     « return true » qui est la valeur retournée par défaut.
  </a>

<br><br>

<!-- Le diese tout seul ne suit pas le lien href. -->
  <a href="#" onclick="my_func('http://diasmath.blogg.org')">
      5. Lien Dièse en Singleton (pas de suivi href)
  </a>

  <script language="JavaScript">
   function my_func(s) 
       console.dir(Object.getOwnPropertyDescriptors(Document));
       window.open(s)
   
  </script>

<br>
<br>

 <!-- Avec GESTION D'ÉVÉNEMENT.
 // Événement (event) = click du lien
 // Event Listener = "click"
 // my_func2 = gestionnaire d'événement
 -->
  <script language="JavaScript">
   function my_func2(event) 
      console.dir(event);
      window.open(event.originalTarget["href"])
   
  </script>
 <a target=_blank href="http://dmedit.centerblog.net"
     id="newel" onclick="return false">
     6. By specifying another eventlistener
     (and deactivating the default).
  </a>
  <script language="JavaScript">
      let a=document.getElementById("newel");
      a.addEventListener("click",my_func2)
  </script>

【讨论】：

每个链接都是一种可能性的例证。

【参考方案9】：

如果你只想处理一个函数而不是处理它自己的 href，请在函数末尾添加 return false 语句：

 <a href="#" onclick="javascript: function() ... ; return false return false">click</>

【讨论】：

三点说明：1）javascript:在这里没用，2）你定义了一个函数，但从不调用它。 3) 你定义函数的方式可能会导致语法错误。

【参考方案10】：

另一种方法是：

<a href="javascript:void(0);" onclick="alert('testing')">

【参考方案11】：

编辑 这将在单击编辑函数名称后创建一个带有 Edit 的链接，因为 edit 将被调用。

【讨论】：

编辑