我可以在用户单击链接后操作DOM吗?

Can I manipulate the DOM after the user clicks a link?

本文关键字：操作 DOM 链接 用户 单击 我可以      更新时间：2023-09-26

我试图理解浏览器的行为一旦链接被点击，或表单已提交-任何操作，这是由用户触发，并以他们在一个新的URL登陆结束。我被要求在按钮和链接上安装一些跟踪代码，这依赖于更新一个不可见的iframe的src属性。

所以-我的具体问题是:

  • 我可以依赖的DOM是可操作的，一旦用户点击了一个链接?也就是说，我可以更新节点上的属性吗?在新页面加载之前，是否能保证更新成功?

  • 是由这些操作(例如，我给一个iframe一个新的src属性)触发的任何请求可靠吗?显然，当请求完成时，新页面已经加载，但是也有可能(但可能无法跟踪)请求已经成功发出。

我的直觉是，这两个都不可靠——我自己肯定不会写这样的系统。我真的在寻找参考或规范，这样我就可以用更好的方式来做这件事。

谢谢!

所有操作完成后可以继续加载页面。这样的:

document.body.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'a'){
        e.preventDefault();
        var href = e.target.getAttribute('href');
        // do your job here
        window.location.href = href; // navigate
    }
});

小提琴

总之，No.

一旦URL改变了(并且导航完全离开了页面)，现在的DOM就完成了。在等待点击动作生效和新页面加载的过程中，在极少数情况下可能会发生更改，但这是非常不可靠的。

在web应用程序中处理跟踪的正常方式是在服务器端进行跟踪，因为这显然委托了用户被导航到的位置。

对于一个纯粹的客户端跟踪实现，您需要提供一个钩子，它捕获点击操作，进行任何跟踪，然后在跟踪过程完成后执行所需的操作。实现这一点的一种方法是创建一个文档范围的click事件，它拦截所有的click，跟踪所有信息，然后根据需要委托操作。另一种方法是为导航链接定义自己的点击事件，不幸的是，我个人只能提供一个jQuery代码片段，而不是标准的JavaScript。

'karaxuna'提供的解决方案很好地演示了纯JavaScript中的文档作用域机制。

对于有助于强调为什么后导航处理不可靠的文档，请参考以下链接:

web应用程序的W3导航计时

您必须在允许事件完成之前'拦截'它。这是用jquery最容易做到的。你可以这样做:

$(document).on(
   "click",
   '.button',
   function(e){
       //do fancy stuff like update the iframe here
   });
相关文章：