如何使用链接调用JavaScript？_Javascript

如何使用链接调用JavaScript？

javascript

如何使用链接调用JavaScript？,javascript,Javascript,如何使用链接调用JavaScript代码？ <a href="javascript:alert('Hello!');">Clicky</a> 编辑，几年后：否！永远不要这样做！我年轻又愚蠢再次编辑：有几个人问你为什么不应该这样做。有几个原因：演示文稿：HTML应该关注演示文稿。将JS放在HREF中意味着您的HTML现在在某种程度上处理业务逻辑安全性：像这样在HTML中使用Javascript。内容安全策略（CSP）是一个附加的安全层，有助于检测和减轻某些类型的攻

如何使用链接调用JavaScript代码？


<a href="javascript:alert('Hello!');">Clicky</a>

编辑，几年后：否！永远不要这样做！我年轻又愚蠢

再次编辑：有几个人问你为什么不应该这样做。有几个原因：

演示文稿：HTML应该关注演示文稿。将JS放在HREF中意味着您的HTML现在在某种程度上处理业务逻辑

安全性：像这样在HTML中使用Javascript。内容安全策略（CSP）是一个附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站点脚本（XSS）和数据注入攻击。这些攻击被用于从数据盗窃到网站破坏或恶意软件传播的一切

可访问性：锚定标记用于链接到其他文档/页面/资源。这使得屏幕阅读器、盲文终端等更容易确定发生了什么，并为视障用户提供有用的信息

我想您可以使用

onclick

事件，类似这样：

<a onclick="jsFunction();">

了解解决此问题的更好方法。
或者，如果您使用
不引人注目的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>


//等待页面先加载
window.onload=函数（）{
//获取对页面上链接的引用
//id为“mylink”
var a=document.getElementById（“mylink”）；
//设置单击链接时要运行的代码
//通过将函数分配给“onclick”
a、 onclick=function（）{
//你的代码在这里。。。
//如果你不想链接到
//将浏览器重定向到其他页面，
//“google.com”在我们这里的例子中，那么
//在该块末尾返回false。
//请注意，这也可以防止事件冒泡，
//这可能是我们想要的，但不会
//总是这样。
返回false；
}
}
还有，为什么不在jQuery中低调一些：
  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML
低调的Javascript有许多优点，以下是它所采取的步骤以及为什么使用它很好
链路正常加载：

这一点很重要，因为它适用于未启用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脚本》
只需使用javascript:----示例
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })

基于@mister_幸运答案与jquery的结合使用：
$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

Html代码：
<a id="unobtrusive" href="http://jquery.com">jquery</a>

您可以使用按钮并将其样式设置为链接：
HTML代码：

按钮{
宽度：0.0000000001px；
高度：0.00000000001px；
背景色：#ffffff；
颜色：蓝色；
填充：14px 20px；
利润率：8px0；
边界：无；
光标：指针；
}
示例按钮
我推荐第二个，因为第一个按钮会将您滚动到页面顶部。是的，它肯定会，除非您在函数后添加“return false；”。这是1998代码。使用一种不引人注目的解决方案。请两个都不要用！链接是用于链接的，它们不是调用javascript的虚拟元素。如果要将javascript内联，请这样做：我喜欢不必将事件处理函数内联。这是唯一的方法。请投票否决内联答案。安德鲁：请在投反对票的同时留下一条评论，解释为什么内联答案不好。你能解释为什么这比目前接受的答案好，以及脚本应该放在页面的什么位置（因为这显然是一个初学者级别的问题）？如果我不想重定向用户，只想运行一些代码，那么我应该为href
添加什么？编辑：我看到它可以留空：href=“”
。它不会重定向浏览器。您应该将真实的url放在href中，即使您的javascript将替换该操作。这样，如果他们没有启用javascript，您的链接仍然有效。为什么最好通过窗口添加onclick
事件。onload
，与其将onclick
直接放在
标记中，不如考虑一下，如果您不想将工作的功能单元划分到源文件中的不同物理位置，或者分散在多个源文件中，该怎么办。如果您在a href标记中添加了一个javascript调用，只需看一行就可以清楚地看到发生了什么。我关心的是将这些功能分离到不同的物理位置，在那里很难了解正在发生的事情。也许这就是我的风格。这对搜索引擎优化有用吗？这样爬虫就可以找到链接并遵循它了吗？因为不是每个人都使用jquery。@GregMiernicki是和否取决于你所说的链接是什么意思。看看HTML。webcrawler或任何关闭javascript的客户端将访问给定的HREF。启用Javascript的客户端将运行click操作，然后在该函数未返回假值或调用preventDefault的情况下跟随链接。在本例中，href是一个回退，因此为什么它被称为“不引人注目的”，也许是对该方法问题的一些描述？这比href='#'更糟糕吗 window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

<a id="unobtrusive" href="http://jquery.com">jquery</a>