创建一个双功能的html Url链接

Create a dual function html Url Link?

本文关键字：功能 html Url 链接 一个 创建      更新时间：2023-09-26

问题：

您在HTML页面中有一组常规的URL链接，例如：

<a href="/foo/bar">Foo Bar</a>

您想要创建一个JavaScript函数，这样当点击任何HTML链接时，客户端的浏览器就不必导航到新的URL"/foo/bar"，而是执行一个JavaScript功能（例如。例如，这可以调用Ajasian并加载HTML数据，而无需重新加载页面）。

但是，如果JavaScript被禁用或蜘蛛对网站进行爬网，则UTL链接将得到良好维护。

这可能吗？它已经存在了吗？通常的方法是什么？

编辑1:

这些都是很好的答案！

只是一个后续问题：

如果用户单击后退按钮或前进按钮，这将自然中断（因为它将返回到它所在的最后一个物理页面，而不是加载的页面）。

是否有任何方法（跨浏览器）来维护后退/前进按钮？

（例如，创建一个点击并覆盖浏览器按钮的链接数组，并使用该数组进行导航）？

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

如果Javascript处于关闭状态，则链接行为正常。

在这种情况下，除非your_function()没有返回false，否则单击时也会跟随该链接。

为了防止这种情况，可以使your_function()返回false，或者在onclick属性中的函数调用之后添加return false;

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
        return false;
    }
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>

或者：

<script type="text/javascript">
    function your_function() {
        alert('clicked!');
    }
</script>
<a onclick="your_function(); return false;" href="/foo/bar">Foo Bar</a>

使用元素.addEventListener（）

点击后默认锚定行为：

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function() {
            alert('clicked');
        }, true); 
    }, true);
</script> 
<a id="your_link" href="/foo/bar">Foo Bar</a>

无：

<script type="text/javascript">
    document.addEventListener("load", function() { 
        document.getElementById("your_link").addEventListener("click", function(event) {
            event.preventDefault();
            alert('clicked');
        }, true); 
    }, false);
</script> 
<a id="your_link" href="/foo/bar">Foo Bar</a>

考虑到当前的HTML和W3C API，我会选择：

<script src="linkify.js"> </script>

在标记中，linkify.js包含以下内容：

window.onload= function() {
    document.addEventListener('click', function(ev) {
        ev.preventDefault();
        var el = ev.target;
        if (el.tagName === 'A') {
            // do stuff with el.href
        }
    }, false);
};

参见例如。http://jsfiddle.net/alnitak/nrC7G/或http://jsfiddle.net/alnitak/6necb/对于不使用CCD_ 5的版本。

请注意，此代码使用在document对象上注册的单个侦听器函数，该函数将作用于页面上的每个<A>标记，该标记本身不会捕获点击。

使用onclick属性：

<a href="/home.html" onclick="javascript: performFunction(this); return false;">click?</a>

return false阻止默认行为，但在没有JavaScript的情况下，将遵循该链接。

function do_whatever (e)
{
   e.preventDefault ();
   // do whatever you want with e.target
}
var links = document.getElementsByTagName ("a");
for (var i=0; i<links.length; ++i)
   links[i].addEventListener ('click', do_whatever);

http://jsfiddle.net/bTuN7/

所有这些都是在脚本内完成的，如果JavaScript不起作用，它不会"受伤"。

如果你考虑AJAX，那么你必须知道，谷歌机器人试图解析它。http://www.youtube.com/watch?v=9qGGBYd51Ts

您可以进行如下编码：

$('a').click(function() {
    doSomethingWithURL($(this).attr('href'));
    return false;
});

JavaScript不会在被禁用或是某个网络爬虫的情况下执行，所以从我的角度来看，这是最好的。

有很多这样的方法：http://www.malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/

不过，请记住，凭借设置良好的服务器和缓存，Ajax Load不会为您带来太多性能。

相关文章：