3

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

所以 - 我的具体问题是：

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

  • 这些操作触发的任何请求（例如，我给 iframe 一个新src属性）是否可靠？显然，新页面在请求完成时已经加载——但有可能（但可能无法跟踪）请求已成功发出。

我的直觉是这些都不可靠——我自己绝对不会编写这样的系统。我真的在寻找参考资料或规范，所以我可以用更好的方式来做这件事。

谢谢！

4

3 回答 3

5

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

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

小提琴

于 2013-04-02T12:56:40.197 回答
3

简而言之，不。

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

在 Web 应用程序中处理跟踪的常规方法是在跟踪服务器端进行，因为这显然代表了用户被导航到的位置。

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

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

更新

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

Web 应用程序的 W3 导航计时

于 2013-04-02T13:02:27.390 回答
2

您必须在允许完成之前“拦截”该事件。使用 jquery 最容易做到这一点。您可以执行以下操作：

$(document).on(
   "click",
   '.button',
   function(e){
       //do fancy stuff like update the iframe here
   });
于 2013-04-02T12:57:42.427 回答