Блог

Главная - Вопросы по программированию - Рабочий стол Safari не выполняет Javascript, когда пользователь переходит на страницу с помощью кнопки «Назад»

Рабочий стол Safari не выполняет Javascript, когда пользователь переходит на страницу с помощью кнопки «Назад»

#javascript #safari

#javascript #safari

Вопрос:

Я работаю над страницей, которая зависит от запущенного Javascript. Он использует простой ванильный Javascript, без jQuery или фреймворка. Когда пользователь заходит на страницу, Javascript выполняется, как ожидалось. Когда они переходят на другую страницу и возвращаются на исходную страницу с помощью кнопки «Назад», Javascript, похоже, не выполняется в Safari desktop, но выполняется в Chrome и Firefox.

Кажется, что Safari может загружать кэшированную версию страницы, а не перезагружать страницу, несмотря на то, что я отправляю заголовки элементов управления кэшем со страницей. Заголовки управления кэшем, которые я отправляю, являются:

 Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

Вот простой пример кода, который демонстрирует такое же поведение.

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Test</title>
</head>

<body>
<h1>JS Test</h1>

<p>This is a simple test file.</p>

<p id="hideMe">This paragraph should be hidden unless you came back.</p>

<p>Click <a href="https://www.google.com">here</a>.</p>

<script>
    /* Returns the search query variable value or false if not found */
    function getQueryVariable(varName) {
        var query = window.location.search.substring(1);
        var vars = query.split("amp;");
        for (var i = 0 ;i < vars.length; i  ) {
            var pair = vars[i].split("=");
            if(pair[0] == varName){
                return decodeURIComponent(pair[1]);
            }
        }
        return(false);
    }

    var windowLoaded = function() {
        console.log("windowLoaded starting...");

        /*
         * If back is not in the query string hide the paragraph and push the
         * query variable into our history.
         */
        var cameBack = getQueryVariable("back");
        if (!cameBack) {
            var p = document.getElementById("hideMe");
            p.hidden = true;
            history.pushState(null, null, "?back=true");
        }
    };
    
    window.onload = windowLoaded;
</script>
</body>
</html>

Если вы посетите эту страницу в Chrome, Firefox или Safari (рабочий стол), вы заметите, что #hideMe абзац скрывается, а затем Javascript помещается ?back=true в историю браузера. Далее, если вы нажмете на ссылку, вы перейдете в Google. В Google нажмите кнопку «Назад». В Chrome и Firefox будет отображаться #hideMe абзац. В Safari абзац по-прежнему будет скрыт. Если вы нажмете кнопку «Перезагрузить», Safari фактически перезагрузит страницу и выполнит Javascript.

Вы также можете проверить консоль Javascript, и вы увидите, что Safari никогда не вызывает windowLoaded , когда вы возвращаетесь на страницу из Google.

Есть ли какой-либо способ заставить Safari запускать Javascript, когда пользователь переходит на страницу с помощью кнопки «Назад»?

Комментарии:

1. почему бы вам просто не использовать IIFE? developer.mozilla.org/en-US/docs/Glossary/IIFE

2. @arslan2012 спасибо за идею. Я попробовал добавить этот фрагмент в Javascript выше, (function () { console.log("IIFE function executed."); })(); . К сожалению, я получил те же результаты. Консоль показывает, что функция выполняется при загрузке страницы, но не тогда, когда я добираюсь до нее, нажав кнопку «Назад».