Различать onbeforeunload для загрузки файлов и изменения страницы

18

У меня есть событие onbeforeunload , которое должно срабатывать каждый раз, когда пользователь переходит на новую страницу. Он работает достаточно хорошо, но я обнаружил, что он также запускается в Chrome в любое время, когда пользователь загружает файл со страницы, на которой они находятся.

Я хотел бы узнать, запущено ли событие, потому что оно запускается при загрузке файла. Каков наилучший способ сделать это?

EDIT: Как пояснение, я не владею сайтом, на котором я слушаю onbeforeunload on. Событие прослушивается фрагментом Javascript, который устанавливается на сторонних сайтах.

    
задан dshipper 18.01.2013 в 03:28
источник
  • Загрузить двоичный файл без запуска onbeforeunload –  Felipe Fonseca 18.01.2013 в 03:55
  • Извините, я должен был сделать это более ясным, я не владею сайтом, на котором я слушаю onbeforeunload. Это для виджета, который я создал. –  dshipper 18.01.2013 в 04:12
  • @dshipper Я понимаю, что это немного поздно, но я нашел хорошую работу вокруг, используя какой-то неинтрузивный javascript, см. мой ответ ниже. Как вы думаете? –  Adrien Be 09.10.2014 в 15:21

3 ответа

0

Работа javascript вокруг

Это единственная «чистая» работа, о которой я мог думать и amp; он работает нормально.

Еще один код в вашем вопросе, показывающий, как вы на самом деле используете «onbeforeunload», будет большим.

Но я предполагаю, что вы используете что-то вроде кода ниже для анимации курсора «Загрузка ...».

/* Loading Progress Cursor
 * 
 * Tested on:    IE8, IE11, Chrome 37, & Firefox 31
 * 
 * [1] the wildcard selector is not performant but unavoidable in this case
 */ 
.cursor-loading-progress,
.cursor-loading-progress * { /* [1] */
  cursor: progress !important;
}

Решение

1-й шаг:

/* hooking the relevant form button
 * on submit we simply add a 'data-showprogresscursor' with value 'no' to the html tag
 */
$(".js-btn-download").on('submit', function(event) {
    $('html').data('showprogresscursor', 'no' );
});

2-й шаг:

/* [1] when page is about to be unloaded
 * [4] here we have a mechanism that allows to disable this "cursor loading..." animation on demand, this is to cover corner cases (ie. data download triggers 'beforeunload')
 * [4a] default to 'yes' if attribute not present, not using true because of jQuery's .data() auto casting
 * [4b] reset to default value ('yes'), so default behavior restarted from then on
 */
var pageUnloadOrAjaxRequestInProgress = function() {
    /* [4] */
    var showprogresscursor = $('html').data('showprogresscursor') || 'yes';  /* [4a] */
    if( showprogresscursor === 'yes' ){
        $('html').addClass('cursor-loading-progress');
    }
    else {
        $('html').data('showprogresscursor', 'yes' );  /* [4b] */
    }
}

$( window ).on('beforeunload', function() {    /* [1] */
    pageUnloadOrAjaxRequestInProgress();
});

Обратите внимание, что я использую $('html').addClass('cursor-loading-progress'); , так как это ожидаемый CSS в моем примере, но вы можете просто сделать все, что вам нравится на данный момент.

Еще одна пара задач:

  • Чтобы открыть страницу загрузки файла на новой вкладке
  • Чтобы запустить обновление страницы после завершения загрузки файла
ответ дан Adrien Be 08.10.2014 в 11:33
  • проверьте наиболее употребимый ответ ниже –  Adam Moszczyński 21.03.2018 в 13:04
15

Если вы добавите в тег download="[FILENAME]", то, кажется, не допустить onbeforeunload от стрельбы:

<a download="myfile.jpg" href="mysite.com">click me</a>

Это гораздо более простое решение. Вы можете оставить имя файла и просто сказать «загрузить», чтобы использовать имя файла по умолчанию. Позвольте мне отметить, что это имеет побочный эффект принудительной загрузки вместо использования кеша. Я думаю, что это было добавлено к chrome и ff в 2012 году. Не уверен насчет сафари или поддержки.

    
ответ дан jsarma 13.11.2014 в 23:22
  • Это может быть прекрасно использовано вместе с target="_ blank", что помогает в браузерах, которые не поддерживают загрузку, как и все версии Internet Explorer. Для них он открывает новую вкладку на короткое время. Те, у кого есть правильная поддержка загрузки, сразу начнут загрузку и не откроют новую вкладку. –  cheshire 20.04.2017 в 21:08
  • 'download' не поддерживается в IE. –  Tomas 25.08.2017 в 14:32
  • В Chrome это больше не работает. –  tirdadc 19.10.2017 в 19:38
-2

Поиск через js-файлы на вкладке отладчика Chrome chrome для beforeunload, если вы обнаружите, что он устанавливает точку останова и видит, почему и что передается ему при загрузке. Если вы не найдете ничего похожего на использование этого события, попробуйте отключить Chrome defaultEvent для onbeforeunload и посмотреть, продолжает ли он работать.

window.onbeforeunload = null;
    
ответ дан shibbybird 18.01.2013 в 05:09
  • Я получаю голос, объясняющий, как определить проблему. Удивительно, я не говорю ему, чтобы он менял код, чтобы навсегда исключить событие onbeforeunload. Просто чтобы узнать, является ли это событием onbeforeunload, вызывающим проблему. Если он не может найти его, и он устанавливает его на нулевую нагрузку, этого больше не должно быть. Но мне нравится downvotes, а затем кто-то не дает лучшего ответа. –  shibbybird 05.02.2013 в 17:18
  • Я думаю, что downvote был обусловлен структурой вашего ответа - на самом деле он не отвечает на вопрос и будет более подходящим в качестве комментария. –  brandonscript 17.01.2015 в 01:53