Блог

Главная - Вопросы по программированию - Перейдите на существующую страницу в истории вместо перезагрузки этой страницы путем доступа к ссылке

Перейдите на существующую страницу в истории вместо перезагрузки этой страницы путем доступа к ссылке

#javascript #html

#javascript #HTML

Вопрос:

Я ищу способ доступа к страницам, уже загруженным в историю. Если страница была посещена в прошлом css , мы можем распознать ее, и поэтому мы можем установить пользовательские стили для посещенных ссылок. Я не знаю аналогичной опции в javascript , но она должна существовать. Между тем, если страница найдена в истории, мне также нужна ее позиция, чтобы иметь возможность устанавливать history.go(currentPosition) var.

Это может быть какой-то другой способ для той же цели, который заключается в том, чтобы избежать перезагрузки страницы ее ресурсов, особенно скриптов, потому что мне нужно иметь возможность использовать переменные, измененные в этих скриптах. Следующий пример может лучше показать, что я имею в виду:

Поместите следующие 3 файла в ту же папку, затем перейдите на начальную страницу, index.html . Вы можете видеть, что при навигации по History странице страница не перезагружается, а переменные сохраняются в памяти. Это то, что мне нужно!

файл: index.html 

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Initial page</title>
    </head>
    <body>
        <h3>This is initial page</h3>
        <p>In the next div we have a running timer by updating a variable in the loaded script:</p>
        <div id="output"><p></p></div>
        <a href="another.html">Navigate to another page</a>
        <script id="pageScript">
            const output = document.querySelector('#output p');
            output.innerHTML = 'Script loaded...';
            let temp = 0;
            setInterval(() => {
                temp  ;
                output.innerHTML = 'Time elapsed: '   temp   ' seconds.';
            }, 1000);
        </script>
    </body>
</html>

файл: another.html 

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Another Page</title>
    </head>
    <body>
        <h3>This is another page</h3>
        <p>Test the following links to see the difference:</p>
        <a href="javascript:history.back()"> amp;<amp;< Back</a>
        <br>
        <a href="index.html">Regular link to initial page</a>
        <br>
        <a href="last.html">Regular link to last page</a>
    </body>
</html>

файл: last.html 

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Last Page</title>
    </head>
    <body>
        <h3>This is last page</h3>
        <p>Test the following links to see the difference:</p>
        <a href="javascript:history.back()"> amp;<amp;< Back</a>
        <br>
        <a href="index.html">Regular link to initial page</a>
        <br>
        <a href="javascript:history.go(-2)"> amp;<amp;< Back amp;<amp;< Back</a>
    </body>
</html>

Ответ №1:

Справедливо ли говорить, что вы намерены поддерживать таймер независимо от того, где пользователь находится на одной из ваших страниц?

Если единственной целью является поддержание таймера на всех страницах, вы, безусловно, можете сохранить время начала пользователя в локальном хранилище или хранилище сеанса, а затем рассчитать прошедшее время, используя текущее время.

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

1. Конечно, нет, это не единственное мое намерение поддерживать таймер, а целый скрипт с множеством переменных 🙂 Этот пример просто показывает, что страница не перезагружается при обращении к истории.

Метки: