2016-12-04 1 views
0

У меня есть функция OnClick, которую я называю, как это и затем перезагрузить страницу:Вызов функции одновременно с location.reload, чтобы отобразить соответствующее сообщение в Javascript

$(document).on("click", "#btnAuthorize", function() { 
     location.reload(); 
     $('#messageLoading').show(); 
    }); 

Есть ли способ вызова функции, который будет отображать всплывающее окно во время перезагрузки страницы?

Фокус в том, что перезагрузка страницы может занять до 30-50 секунд, поэтому я должен показать что-то конечному пользователю.

Может ли кто-нибудь помочь мне с этим?

+0

вы хотите выскочат во время страницы перезагружается? – Mahi

+0

Предупреждение или какое-то другое всплывающее сообщение, чтобы сообщить пользователю, что что-то происходит – User987

+0

Вы вызываете перезагрузку страницы, которая отбрасывает ваш текущий код. Один из вариантов - сохранить контроль и перезагрузить страницу с помощью вызова Ajax, а затем заменить страницу на возвращаемый HTML. Поскольку ваш код все еще работает, вы можете делать все, что вам нравится во время загрузки. –

ответ

1

Если вам нужно буквально перезагрузить существующую страницу (вместо перехода на вызов ajax и т. Д.), Вы не сможете выполнить «перезагрузку» сообщения на странице. То, что вы можете сделать, это открыть дочернее окно с именем:

var wnd = window.open("reloading.html", "reloading", "width=400,height=400,toolbar=no); 
sessionStorage.setItem("reloading", "Yes"); 

Обратите внимание на флаг хранения сессии, поэтому мы знаем, уже ли мы сделали это. Затем в коде запуска для страницы вы перегрузочная, закрыть это окно:

if (sessionStorage.getItem("reloading")) { 
    sessionStorage.removeItem("reloading"); 
    var wnd = window.open("", "reloading"); 
    if (wnd) { 
     wnd.close(); 
    } 
} 

Это выглядит странно, но называть window.open с "" URL и тем же именем, как у открытого окна вашей страницы происхождение имеет доступ к возвратам ссылку на существующее окно, которое вы можете закрыть.

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

Вот полный, рабочий пример (не корректно работает в jsFiddle или Stack Snippet, та песочница среды различных способов):

<!DOCTYPE HTML "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Reloading Window Example</title> 
<style> 
body { 
    font-family: sans-serif; 
} 
</style> 
</head> 
<body> 
<input type="button" value="Reload"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
if (sessionStorage.getItem("reloading")) { 
    sessionStorage.removeItem("reloading"); 
    var wnd = window.open("", "reloading", "height=400,width=400,toolbar=no"); 
    if (wnd) { 
     wnd.close(); 
    } 
} 
$("input").on("click", function() { 
    var wnd = window.open("", "reloading", "height=400,width=400,toolbar=no"); 
    wnd.document.write("<!doctype html><head><title>Reloading</title></head><body>Reloading...</body></html>"); 
    setTimeout(function() { 
     sessionStorage.setItem("reloading", "Yes"); 
     location.reload(); 
    }, 2000); 
}); 
</script> 
</body> 
</html> 
0

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

Для этого использует цель AJAX (как вы используете JQuery): http://api.jquery.com/jquery.ajax/

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

Смежные вопросы