OSX Safari Frame Load Interrupted

问题:

I have a basic HTML website (with some javascript) using a simple anchor tag to download a file like so:

<a href="../resources/mexml/MexmlSamples-1.0.zip">Mexml Samples 1.0</a>

In order to track the number of downloads, I have an onclick handler that passes an event to Google Analytics like so:

$('#mybutton').click(function(e){ga('send','event','Download','MexmlSample','MexmlSample-1.0');});

This works as expected when downloading the file using Chrome on OS X, and IE on Windows 7. The file downloads and I see the event in my GA account.

When I test it in Safari 8 on Yosemite, the file does download, but GA only rarely sees the event. And of course I get the dreaded Failed to load resource: Frame load interrupted in the Safari error console.

I assume that I get the GA event sometimes because of a race condition between when Safari interrupts the action and when the GA code fires.

So can anything be done to fix this in Safari so that I always get the GA events?

Note that my question probably has the same root cause as this unanswered question: Frame load interrupted when downloading excel files

Update June 6

I am now thoroughly confused. I just noticed that if I open up a new browser page to my site (in Safari), and click on the download, then it gets logged by GA. However subsequent clicks download still the file, but don't get logged by GA.

If I close that window, and open a new one, then again the first download gets logged by GA.

In contrast, when using Chrome every download gets logged by GA.

I am now thinking that I may be looking at the wrong problem. The behavior I am seeing is telling me that Safari is maintaining a state in JavaScript that allows the first GA call to go through, but blocks all subsequent calls.

But this is the same code being run by Chrome, so I don't know where to how to even start debugging the problem.

回答1:

If you always want to get the ga event then the hitCallback is likely the only way to go until whatever is wrong with Safari is fixed. I use a similar pattern to send a GA event from a page in an app which is just a redirect after a whole load of database stuff has been executed in rails. There is no noticeable lag from adding the javascript redirect into the callback. However I am not sure how to initiate the download from javascript off the top of my head.

ga('send','event','Download','MexmlSample','MexmlSample-1.0', {
   hitCallback: function(){
   initiateDownload();
   })

I am not aware of any need to use the setTimeout() for pattern in this instance.

回答2:

The only solution I can think of - is waiting till GA request will finish, and only after that set location.href to desired file download link. But this is not really good from user's perspective. (This can be achieved with hit callback https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitCallback).

Probably HTML5 download attribute for href will solve the problem. I have no OSX with safari to test, so this is only my thoughts.