Нажмите Ведение журнала с помощью JavaScript.

Question

Я хочу регистрировать все клики по ссылке.

Я написал небольшой регистратор, который можно вызвать по URL-адресу (возвращает пустую страницу).Этот URL-адрес вызывается с помощью метода jquery-ajax.Но, к сожалению, не каждый клик регистрируется, если пользователь использует Firefox (в IE все выглядит нормально).

Я перепробовал много вещей, но не нашел решения этой проблемы, есть ли у кого-нибудь клей?

HTML-код:

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-jQuery-скрипт:

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

РЕДАКТИРОВАТЬ:В примере я пропустил, что мне нужно передать динамические параметры в js-вызове, поэтому «невозможно» удалить событие onclick :(

Answer 1

я бы начал избавиться от встроенного «onclick» код и привязка события позже:

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  }); 

Кроме того, у вас может возникнуть «состояние гонки»..В моем примере у меня есть установите для асинхронности значение false.

Это остановит возврат функции и переход по ссылке до того, как запрос будет выполнен.

Об асинхронном режиме

Причина, по которой я использую async: false здесь потому, что по умолчанию aync имеет значение true, что означает, что запрос AJAX может быть передан только частично к тому моменту, когда браузер увидит return: true, и уходит со страницы.

Это то самое «состояние гонки», о котором я упоминал.Здесь это дешевый трюк, который позволяет избежать этого, заставляя браузер фактически останавливаться до тех пор, пока запрос не будет завершен, а затем позволяя браузеру щелкнуть ссылку.

Более сложный ответ - вернуть «false» (что уничтожит собственное поведение браузера «перейти по ссылке»), а затем получить настоящий перенаправление, выполненное в complete функция.

Это не лишено своих проблем и может привести к замедлению просмотра во время выполнения запросов, давая пользователям время щелкнуть другие ссылки, которые, по-видимому, ничего не делают, а затем, в конечном итоге, один запрос проходит в случайное время, и, казалось бы, случайный происходит перенаправление.

Следовательно, продвинутые решения включают в себя блокировку остальной части страницы и предоставление какой-либо индикации хода выполнения запроса.

(И, следовательно, сложность этого решения на порядок сложнее реализовать на простом примере, чем async: false )

Answer 2

Я думаю, что причина плохих результатов FF заключается в том, что вы покидаете страницу до того, как действие займет время для выполнения.Как упоминается в ссылке Мхартмана, если вы используете цель во внешней ссылке, она должна работать нормально.Если вы не можете этого сделать, возможно, вам придется дождаться завершения журнала, хотя при навигации могут наблюдаться задержки.

HTML-код

<a href="http://google.com" onclick="return loggClick(event);">Click</a>

тот

function loggClick(e) {
  if (!e) e = window.event;

  e.preventDefault();  // cancels the link

  var theLink = this.href;  // stores the link for later

  $.ajax({
     async: false,
     type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false,
         complete: function() {
           // navigate when the log completes
           this.location.href = theLink;
         }
    });
    return true;
  }
}

Answer 3

Второй подход на стороне сервера, о котором вы, возможно, даже не подумали, — это создать страницу, которая будет обрабатывать ваши перенаправления и затем регистрировать данные.

Например:

<a href="LoggerRedirect.ff?url=http://google.com">Click</a>

Answer 4

Приведенный выше плакат верен, но он ненадежен, поскольку вы покидаете страницу до того, как она сможет ее зарегистрировать.

Вы можете сделать это:

1) вернуть false, поэтому href не активен.2) Войдите в систему Click 3) Используйте местоположение.

вы можете увидеть небольшую задержку, если выполнение обработчика onclick занимает много времени.

Answer 5

В этом примере будет отправлено сообщение ajax до того, как будет обработан щелчок по ссылке.Я обнаружил, что мне нужно вызывать ajax синхронно, иначе POST не будет выполнен.В этом примере мое сообщение ajax относится к странице PHP, которая добавляет файл журнала.Этот пример эффективен, поскольку он прикрепляет к окну только событие щелчка.Это также не помешает пользователю щелкнуть ссылку.

//attach click event to window
attachClickEvent = function() {
    $(document).on('click', function(e) { //document for IE8 compatibility
        var element = $(e.target);
        var tag = element.prop('tagName');

        if (tag === 'A') {
            var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href};
            logData(data);
        }
    });
}

logData = function(data) {
    $.ajax({
        async: false,
        cache: false,
        type: "POST",
        data: data,
        url: 'logger.php',
        success: function(msg) { 
            //debugging
        },
        error: function() {
            //debugging
        }
    });
}