javascript - 当 onclick 事件执行异步代码时，如何在新选项卡请求中兑现打开？

Question

设置

我实现了一个“onclick”方法，它异步调用一些第三方代码。它提供了一个回调，他们建议使用一个简单的函数来设置 document.location = href 以确保页面仅在他们的方法返回后发生变化。如果您想在同一个选项卡中打开链接，这很好用，但如果您想在新选项卡中打开，则会发生以下两种情况之一:

问题

1. 如果您中键单击、Ctrl+单击、Shift+单击或 Cmd+单击，它会在执行回调函数后在同一选项卡中打开。
2. 如果您右键单击并选择“在新选项卡中打开”，则根本不会调用 onclick 代码。

问题

是否可以让回调函数返回 true 到 onclick 事件(实际上，使整个事件链同步)？或者，您能否想出一种方法来保留上述案例 1 中的标准浏览器行为？

代码

https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce :

<a href="/product_details?id=P12345" onclick="clicked(); return !ga.loaded;">Product Link</a>

<script>
// Called when a link to a product is clicked.
function clicked() {
  ga('ec:addProduct', {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'position': 1
  });
  ga('ec:setAction', 'click', {list: 'Search Results'});

  // Send click with an event, then send user to product page.
  ga('send', 'event', 'UX', 'click', 'Results', {
      'hitCallback': function() {
        document.location = '/product_details?id=P12345';
      }
  });
}
</script>

Answer 1

这是一个棘手的问题，在我的职业生涯中我不得不多次解决这个问题。我采取了各种方法，在这个答案中我将尝试总结我的最新想法:

不要阻止违约。

当您阻止浏览器执行其默认操作时，您最终不得不自己重新编码这些东西，并且手动处理用户意图和浏览器/平台变化的所有可能组合变得非常棘手。这不值得。有些事情(比如检查按下了哪些键)可以被解释，但还有其他事情(比如用户右键单击并选择“在新选项卡中打开”)基本上不可能检测到。

就我个人而言，我认为最好让浏览器做它的事情，然后想出另一种方法来完成你想做的事情。

使 ga() 函数同步。

在您提供的示例代码中，您试图在用户点击链接时向 Google Analytics(分析)发送电子商务和事件点击。问题在于 ga() 调用是异步的，因此如果用户单击链接，在浏览器加载新页面之前调用可能完成也可能不完成。

一种可能的解决方案是覆盖 analytics.js 发送命中的方式以使其同步而不是异步。这将允许您发送命中，而不必防止事件默认和处理手动打开链接。

analytics.js 最近推出 Tasks ，它允许您覆盖或修改库的各种内置行为。下面是一个示例，说明如何覆盖 sendHitTask 以实现同步版本:

ga('create', 'UA-XXXX-Y', 'auto');

ga(function(tracker) {

  // Grab a reference to the default sendHitTask function.
  var originalSendHitTask = tracker.get('sendHitTask');

  // Modify the send hit task to be sync in cases where an
  // external link was clicked.
  tracker.set('sendHitTask', function(model) {
    if (wasExternalLinkClicked()) {
      var xhr = new XMLHttpRequest();
      var url = '//www.google-analytics.com/collect?' + model.get('hitPayload');
      // Specifying `false` as the third parameter makes the request sync.
      xhr.open('GET', url, false);
      xhr.send();
    } else {
      originalSendHitTask(model);
    }
  });
});

ga('send', 'pageview');

请注意，我还没有测试过这段代码，但我认为它应该可以工作。而且，如果不是很明显，您必须自己实现 wasExternalLinkClicked()，但这应该不会太困难。

无论如何，希望对您有所帮助!