在重定向之前将有关单击的链接的信息发送到服务器 [英] Send information about clicked link to the server before redirect

问题描述

我们正在创建一个点击跟踪应用，该应用可以构建热图.我正在编写一个脚本，用户应该将其插入到其页面中以进行跟踪工作.

We're creating a click tracking app, that builds heatmaps. I'm writing a script which users are suppose to insert into their pages for tracking to work.

它在不需要重定向或表单提交的元素上运行良好.例如，如果我单击h1或p或任何其他按钮，则它完全正确.但是，如果单击a，则对服务器的请求永远不会在正常重定向之前发生.

It works fine on elements, which doesn't require a redirect or form submit. For example, if I click on h1 or p or whatever, it works perfectly correct. But, if I click on a a, request to our server never happens before the normal redirect.

在过去的几天里，我尝试了很多方法来做到这一点.首先，我尝试了一个普通的AJAX调用，因为这是我必须使用JSONP的跨域请求，但是同样，该AJAX调用在重定向之前没有时间执行.添加async: false可以解决问题，但是不适用于JSONP请求.因此，我决定添加一个标志变量，该变量指示通过重定向继续进行是安全的，并使用了一个空的while循环来等待，直到它在ajax回调中变为try.但是while循环阻塞了执行流程，因此回调从未有机会将该变量设置为true.这是一些简化的代码:

In the last couple of days I tried a lot of ways to do that. First of, I tried a normal AJAX call, since it was a cross-domain request I had to use JSONP, but again, that AJAX call did not have time to execute before the redirect. Adding async: false would have solved the problem, but it doesn't work with JSONP requests. So I decided to add a flag variable which indicates that it is safe to move on with redirect and used an empty while loop to wait until it becomes try in the ajax callback. But the while loop was blocking the execution flow, so callback never got a chance to set that variable to true. Here is some simplified code:

$(document).on('click', function (e) {
    //part of the code is omitted 
    $.ajax({
        url: baseUrl,
        data: data,
        type: "get",
        dataType: "jsonp",
        crossDomain: true,
        complete: function (xhr, status,) {
            itsSafeToMoveOn = true;
        }
    });

    while(!itsSafeToMoveOn){}

    return true;
});

接下来我要尝试的是使用unload页面事件，直到正在进行的ajax调用总数变为零(我实现了一个计数器)，然后继续进行重定向.它可以在Firefox和IE中使用，但在WebKit中会出现以下错误:

The next thing I tried is to use unload page event to wait until total ajax calls in progress would become zero (I had a counter implemented) and then to move on with redirect. It worked in Firefox and IE, but in WebKit there was this error:

Error: Too much time spent in unload handler

此后，我意识到我不在乎服务器响应，因此对请求使用img.src将是这种情况的理想选择.因此，此时代码看起来像这样:

After that I realized that I don't care about the server response and using img.src for the request would be an ideal fit for this case. So at this point code looks like this:

$(document).click(function (e) {
    //part of the code is ommited
    (new Image).src = baseUrl + '?' + data;

    if (tag === "a" || clickedElement.parents().has("a")) {
        sleep(100); 
    }

    return true;
});

这样，我稍微提高了整体脚本性能，但是链接的问题仍然没有改变. sleep函数似乎也阻塞了执行流程，请求从未发生.

That way I increased the overall script performance slightly, but problem with links remains unchanged. The sleep function appears to be also blocking the execution flow and request never happens.

剩下的唯一想法是从事件处理程序中返回false，然后手动将其重定向到所单击元素的href或在表单上调用submit()，但这会使事情变得复杂很多，并且相信我已经在不同的浏览器中调试此脚本的工作非常麻烦.

The only idea left is to return false from the event handler and than redirect manually to the clicked element's href or to call submit() on the form, but it will complicate things to much and believe me it's already a huge pain in the ass to debug this script in different browsers.

还有其他想法吗?

推荐答案

var globalStopper = true;

$(document).on('click', function (e) {
    if (globalStopper === false)
        return true; //proceed with click if stopper is NOT set
    else {
        globalStopper = false; //release the breaks

        $.ajax({
            //blahblah
            complete: function (xhr, status,) {
                $(elem).click(); //when ajax request done - "rerun" the click
            }
        });
        return false; //DO NOT let browser process the click
    }
});

此外，不要添加图像，而是尝试添加脚本.然后将脚本添加到HEAD部分.这样浏览器将等待"直到加载完毕.

Also, instead of adding image, try adding script. And then add the script to the HEAD section. This way the browser will "wait" until it's loaded.

 $(document).on('click', function (e) {
     var scriptTag = document.createElement("script");
     scriptTag.setAttribute("type", "text/javascript");
     scriptTag.setAttribute("src", url);
     document.getElementsByTagName("head")[0].appendChild(scriptTag);
     return true;
 }

这篇关于在重定向之前将有关单击的链接的信息发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！