Question

我试图了解浏览器在点击链接或提交表单后的行为 - 用户触发的任何操作，并以落在新网址结束。我被要求在按钮和链接上安装一些跟踪代码，这依赖于在点击时更新不可见的iframe的src属性。

所以 - 我的具体问题是：

用户点击链接后，我可以依赖DOM进行操作吗？也就是说，我可以更新节点上的属性吗？是否可以确保在新页面加载之前这会成功？
这些操作触发的请求（例如，我给iframe一个新的src属性）是否可靠？显然，新页面已在请求完成时加载 - 但是可能（但可能无法跟踪）请求已成功完成。

我的直觉是，这些都不可靠 - 我绝对不会自己写这样的系统。我真的在寻找参考或规格，所以我可以做一个更好的方法。

谢谢！

Answer 1

您可以在所有操作完成后继续页面加载。像这样：

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
    }
});

Fiddle

Answer 2

简而言之，没有。

一旦URL改变（并且导航完全从页面移开），当前的DOM就像完成一样好。在极少数情况下可能会发生更改，同时等待点击操作生效并加载新页面，但这非常不可靠。

在Web应用程序中处理跟踪的常规方法是执行跟踪服务器端，因为这显然会委托用户导航到的位置。

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

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

<强>更新

有助于突出显示导航处理不可靠的原因的文档，请参阅以下链接：

W3 navigation timing for web applications

Answer 3

您必须在允许完成之前“拦截”该事件。这是使用jquery最简单的方法。你可以这样做：

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

用户点击链接后我可以操纵DOM吗？

3 个答案: