如何使用链接调用 JavaScript 代码？
如何使用链接调用 JavaScript？
IT技术
javascript
2021-01-14 12:19:05
6个回答
不显眼的 JavaScript，没有库依赖：
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>
<a onclick="jsfunction()" href="#">
或者
<a onclick="jsfunction()" href="javascript:void(0);">
编辑：
上面的回答真的不是一个好的解决方案，自从我最初发布以来，已经学到了很多关于JS的知识。有关解决此问题的更好方法，请参阅下面的EndangeredMassa 的回答。
<a href="javascript:alert('Hello!');">Clicky</a>
多年后编辑：不！永远不要这样做！我当时年少无知！
再次编辑：有几个人问你为什么不应该这样做。有几个原因：
展示： HTML 应该专注于展示。将 JS 放入 HREF 意味着您的 HTML 现在有点处理业务逻辑。
安全性：像这样的 HTML 中的 Javascript 违反了内容安全策略 (CSP)。内容安全策略 (CSP) 是一个附加的安全层，有助于检测和缓解某些类型的攻击，包括跨站点脚本 (XSS) 和数据注入攻击。这些攻击用于从数据窃取到站点篡改或恶意软件分发的方方面面。在这里阅读更多。
可访问性：锚标签用于链接到其他文档/页面/资源。如果您的链接无处可去，则它应该是一个按钮。这使得屏幕阅读器、盲文终端等更容易确定正在发生的事情，并为视障用户提供有用的信息。
而且，为什么不使用 jQuery 不显眼：
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});
HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>
Unobtrusive Javascript 有很多优点，这里是它需要的步骤以及为什么它很好用。
链接正常加载：
<a id="DaLink" href="http://host/toAnewPage.html">点击这里</a>
这很重要，因为它适用于未启用 javascript 的浏览器，或者如果 javascript 代码中存在不起作用的错误。
javascript 在页面加载时运行：
window.onload = function(){ document.getElementById("DaLink").onclick = function(){ if(funcitonToCall()){ // most important step in this whole process return false; } } }如果 javascript 运行成功，可能使用 javascript 加载当前页面中的内容，返回 false 将取消链接触发。换句话说，如果 javascript 成功运行，则将 return false 设置为禁用链接。在允许它在 javascript 不运行的情况下运行的同时，进行一个很好的备份，以便您的内容以任何一种方式显示，对于搜索引擎，如果您的代码中断，或者在非 javascript 系统上查看。
关于这个主题的最好的书是 Jeremy Keith 的“Dom Scription”
其它你可能感兴趣的问题