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

ПРЕДПОСЫЛКА: Чтобы перейти между страницами на моем сайте, я использую белый непрозрачный слой наложения, который исчез в/из. Например, когда вы нажимаете на ссылку, скрипт предотвращает дефолт, исчезает невидимое белое наложение от скрытого до видимого (делая экран полностью белым), а затем направляет браузер следовать исходной ссылке. Страница назначения изначально также полностью белая, потому что слой наложения отображается по умолчанию. После того, как загружена страница назначения, скрипт сообщает об этом, показывая страницу внизу.Как запустить функцию на текущей странице, когда браузер перемещается назад?

ПРОБЛЕМА: используя тег «onpageshow» в теге body, я получил эффект «затухание от белого до прозрачного», когда пользователь нажимает кнопку обратной навигации браузера. Но я не могу заставить тег «onpagehide» работать так, как хотелось бы - браузер просто перескакивает прямо на белый (без постепенного исчезновения до белого эффекта), когда пользователь нажимает кнопку обратной навигации браузера.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script> 

function curtainup(event) { 
    if (event.persisted) { 
     $(".curtain").delay(500).fadeOut(500); 
    } else { 
     $(".curtain").delay(500).fadeOut(500); 
    }} 

</script> 

<script> 

function curtaindown(event) { 
    if (event.persisted) { 
     $(".curtain").fadeIn(500); 
    } } 
</script> 

<style> 
    body {background-image: url('http://podcollective.com/assets/phong/world.patterns/egypt-V1/EGYPT-D-PATTERN.png');} 

div#smalltextbox { 
    z-index:5; 
    position:relative; 
    background:#7f7f7f; 
    background:rgba(255,255,255,0.5); 
    max-height:350px; 
    max-width:1000px; 
    padding-top: 10px; 
    padding-right:30px; 
    padding-bottom:40px; 
    padding-left:30px; 
    margin-bottom:20px; 
    left:320px; 
    float:left; 
    transform-origin: 0px 0px; 
} 

div.curtain { 
    background:#FFFFFF; 
    position:fixed; 
    width:7000px; 
    height:100%; 
    z-index:1010; 
} 

</style> 
</head> 

<body onpageshow="curtainup(event)" onpagehide="curtaindown(event)"> 

    <div class="curtain"></div> 

    <div id="smalltextbox"><p>Lorem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem orem...</p></div> 

</body>

источник

2014-11-10 Birdman81

Возможно, вы сможете использовать onunload – dandavis

Это обычная проблема, так как браузеры отображают кешированную версию страницы при нажатии кнопки «Назад». Как правило, это то, где JavaScript в зависимости от определенных событий загрузки страницы не удастся. – Sparky

Чтобы следовать вашей логике кода, вам нужно будет:

Intercept "кнопка назад щелкнул" событие.
Проделайте «выцветает до белого» переход
Вернуться назад в истории
и т.д. ...

Проблема? Нет такой вещи, как событие «нажатие кнопки« назад ». Я имею в виду, что вы не можете перехватывать (или даже знать), когда пользователь нажимает кнопку возврата браузера.

Однако ...

Вы можете знать, когда пользователь собирается покинуть страницу с "onbeforeunload" event. Фактически, именно так эти раздражающие добавляют работу (они вызывают предупреждение, когда вы собираетесь покинуть страницу).

... так ...

Вместо того, чтобы перехватывать метки (или кнопки, или любой другой) выберите события, вы можете использовать onbeforeunload событие для запуска плавного перехода от белого к переходу.

источник

2014-11-10 19:00:37 Tivie

Пригвожден; Спасибо! – Birdman81

@ Birdman81 no prob mate – Tivie

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

ответ

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