#javascript #event-handling #refresh
#javascript #обработка событий #обновить
Вопрос:
Я знаю, что это не рекомендуется, но мне это нужно, потому что у меня есть iframe внутри страницы, у которого есть фактическое содержимое, и я хочу, чтобы, когда пользователи нажимали кнопку обновления, iframe перезагружал не всю страницу.
Я знаю, что мне нужно вызвать onunload / onbeforeunload событие, но я не хочу спрашивать меня, хочу ли я покинуть окно, просто не делайте этого.
Возможно ли это? Я обработал клавишу F5, но мне также нравится предотвращать обновление с помощью кнопки.
Комментарии:
1. Это звучит как (к сожалению) случай для
onbeforeunloadсобытия. Вы можете использовать его, чтобы запросить пользователя и спросить, не хочет ли он покинуть страницу (обновление считается «уходом» со страницы).2. Вы не можете и не должны переопределять поведение, которое пользователь ожидает от браузера. Если вам нужна функция «обновить» в вашем приложении, которая работает иначе, чем обычная функциональность кнопки обновления, создайте кнопку обновления в пользовательском интерфейсе вашего приложения. Это очень распространенное явление (см., например, Gmail), и пользователи поймут его гораздо лучше, чем если вы попытаетесь переопределить ожидаемое поведение их браузера.
3. @MattMcDonald Да, я знаю, но я не хочу спрашивать пользователя, просто обновите iframe и отмените событие обновления страницы.
4. @Джордан ну, это неплохой вариант. Спасибо. Ожидайте больше комментариев, на всякий случай.
5. Если вы считаете, что всплывающие окна раздражают, представьте, что произойдет в мире, где можно запретить перенаправление страницы подобным образом.
Ответ №1:
ОБНОВЛЕНИЕ: я написал это 5 лет назад, сейчас браузеры делают разные вещи, вы все равно можете использовать это для тестирования своего набора браузеров, но ваш опыт может отличаться от моего старого исследования.
Экспериментирую с использованием jQuery, потому что я ленив.
Теоретически, предотвращение поведения по умолчанию должно помешать событию делать то, что оно должно делать. Это не работает с событиями в моем примере и дает разные результаты в разных браузерах. Я ввел Math.random(), чтобы определить, была ли страница перезагружена или нет. Поскольку разные браузеры выполняют разные действия, я настоятельно рекомендую НЕ использовать это в производственной среде.
<body>
<p></p>
<script type="text/javascript">
$('p').append(Math.random());
$(window).bind({
beforeunload: function(ev) {
ev.preventDefault();
},
unload: function(ev) {
ev.preventDefault();
}
});
</script>
</body>
С помощью CTRL-R или F5 или кнопки перезагрузки:
- Safari: ничего не делает
- Chrome: ничего не делает
- Opera 10 и 11: ничего не делает
- Firefox 7.x: показывает специальное приглашение с двумя кнопками:
- Оставаться на странице — не перезагружает страницу
- Оставить страницу — перезагружает страницу
- IE7 и IE8: показывает приглашение с двумя кнопками:
- OK — Перезагрузка страницы
- Отмена — не перезагружает страницу
- IE9: показывает приглашение с двумя кнопками:
- Покинуть эту страницу — перезагружается
- Оставаться на этой странице — не перезагружается
Подсказка Firefox (вы можете сказать, что я тестировал его на Mac)
Подсказка IE7 и IE8
Запрос IE9
В заключение:
Да, я не тестировал IE6, я удалил свою виртуальную машину, на которой она была установлена, у меня нет виртуальной машины с установленной бета-версией IE10, так что вам тоже не повезло.
Вы также можете поэкспериментировать с cancelBubble и stopPropagation или, возможно, вернуть false; может быть, обнаружится что-то полезное. Я согласен с ответом Джордана о том, что вам не следует пытаться переопределить значения по умолчанию, поэтому я завершаю свой эксперимент на этом.
Комментарии:
1. Прочитайте эту статью о MDN о preventDefault() developer.mozilla.org/en/DOM/event.preventDefault
2. я пробовал с помощью jquery в jsfiddle. net и кнопка обновления в Chrome, похоже, не заботились об этом коде jquery….
3. Это не работало в Chrome, когда я его писал. Предположительно, это работает в различных браузерах. code-maven.com/prevent-leaving-the-page-using-plain-javascript
Ответ №2:
Возврат false в событии onsubmit предотвращает отправку формы и остается на той же странице без какого-либо взаимодействия с пользователем..
Например..
когда форма, имеющая поле ввода, пуста и отправила эту проверку javascript на проверку и возвращает соответствующий результат.. Если возвращается значение false, ничего не делается (т.е. Страница не обновляется и не перенаправляется)..
Если проверка прошла нормально и если возвращено значение true, выполняется действие формы..
function validateForm(Str) {
mystring=document.getElementById('inputid').value;
if(!mystring.match(/S/)){
alert ('Please Enter a String.Field cannot be empty');
return false;
}else{
return true;
}
}