Document

Как в JS реализуется переход на другую страницу

В этой статье я расскажу, как в JS реализуется переход на другую страницу. А также приведу несколько простых примеров JavaScript редиректа .

Вы можете перенаправлять пользователя с одной веб-страницы на любую другую несколькими способами. В том числе с помощью обновления мета-данных HTML , перенаправления на стороне сервера. Например, используя файл .htaccess , PHP , и с помощью перенаправления на стороне клиента через JavaScript .

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

Давайте рассмотрим, как можно использовать JavaScript для перенаправления пользователя на другую страницу.

Автоматическое JavaScript-перенаправление на другую страницу

Если нужно автоматически перенаправить пользователя с одной страницы ( URL1 ) на другую страницу ( URL2 ), можно использовать следующий код:

Необходимо вставить приведенный выше код на первую страницу ( URL1 ). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента ( а не в нижней части страницы ), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.

СОВЕТ: Если вы используете встроенный JavaScript (т.е. без внешнего файла .js), не забудьте поместить код JavaScript в теги .

Перенаправление на другую страницу через X секунд

В этом примере мы будем осуществлять js редирект на другую страницу через некоторое время после загрузки страницы. Например, если нужно перенаправить посетителя на главную страницу после отображения страницы приветствия в течение 5 секунд:

setTimeout(function()< window.location.href = 'homepage-url'; >, 5 * 1000);

Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.

Мы использовали метод setTimeout , чтобы указать скрипту выполнить перенаправление через 5 секунд ( умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды ).

СОВЕТ: В JavaScript значения времени всегда рассчитываются в миллисекундах.

Перенаправление на другую страницу, исходя из условия

Например, можно выполнить перенаправление в зависимости от браузера посетителя ( хотя это не рекомендуется ), размера экрана, времени суток, или другого условия.

Используйте следующий код для перенаправления посетителей, которые удовлетворяют определенному условию:

Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:

Перенаправление на другую страницу на основе действий пользователя

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

Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton :

document.getElementById('mybutton').onclick = function() < window.location.href = 'redirect-url'; >;

Можно сделать то же самое, используя следующий код:

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

Я попытался рассмотреть все возможные случаи js редиректа на другую страницу . Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.

Источник

Передача значения JavaScript между HTML-страницами

В этой статье мы рассмотрим передачу значения JavaScript между HTML-страницами. Итак, в основном у нас будут две HTML-страницы, и мы переместим некоторую информацию с одной страницы на другую, используя некоторые базовые методы. Так что эта штука будет очень полезна, когда вы попытаетесь создать веб-сайты, где вам нужно передавать данные с одной страницы на другую. Мы увидим это на очень простом примере и объяснении.

Методы передачи значения JavaScript между HTML-страницами

Хорошо, сначала давайте рассмотрим несколько различных методов передачи значения JavaScript между HTML-страницами:

1. Локальное хранилище
2. Строка запроса URL
3. IndexedDB
4. Одностраничное приложение (SPA)

Так что это основные методы, которые помогают в выполнении этой конкретной задачи. Мы рассмотрим два из этих методов: локальное хранилище и строку запроса URL. Поскольку эти методы довольно хороши и прямолинейны, IndexedDB также очень похож на локальное хранилище, но с ним сложно иметь дело. Одностраничные приложения — это не что иное, как AngularJS и ReactJS, что делает эту задачу намного проще, чем другие методы, а также это не та тема, которую мы можем затронуть в этой отдельной статье.

Передача значения JavaScript между HTML-страницами: локальное хранилище

Первый базовый метод — это локальное хранилище, которое на самом деле является одним из основных способов. Метод локального хранения уже задан самим JavaScript. Теперь давайте посмотрим на базовый пример, чтобы понять глубже, здесь мы попытаемся передать время на вторую страницу с первой страницы.

Итак, здесь мы создаем две HTML-страницы и два связанных с ними JS-файла. В первом HTML-файле мы просто добавили заголовок и кнопку. Затем в файле app.js мы создали объект для Date() , а затем добавили событие нажатия на кнопку, где мы получили доступ к методу localStorage() .

Чтобы мы могли использовать его и сохранить дату с помощью localStorage.setItem() . Затем мы использовали этот window.document.location = ‘./index2.html’ ; чтобы установить целевое местоположение, где нам нужно получить доступ к этим данным. Наконец, мы должны запустить эту функцию, когда эта страница загружается с помощью document.addEventListener(‘DOMContentLoaded’, function()< init();>)

         
Click The Button To Go On Next Page
 Click 
  

const init = (e) =>< let btn = document.querySelector("#item1"); let startTime = new Date(); btn.addEventListener('click', function()< localStorage.setItem('start-time', startTime.getTime()); window.document.location = './index2.html'; >); >; document.addEventListener('DOMContentLoaded', function()< init(); >);

Теперь мы добавили некоторые основные заголовки, а также добавим span с id, чтобы мы могли помещать в него данные, используя его ID. Затем в сценарии app2.js мы получим доступ к этим данным, используя этот метод localStorage.getItem(‘start-time’) . Теперь мы создали еще один объект Date() и просто вычитаем оба значения времени. И мы добавили вызов функции при загрузке нашей второй страницы.

         
Next Page
 
Here's The Amount of Time Passed: TIME
 
  

const init = (e) => < let spn = document.querySelector("#time"); let endTime = new Date(); let elapsedTime = endTime.getTime()- localStorage.getItem('start-time'); spn.innerHTML = elapsedTime; >document.addEventListener("DOMContentLoaded", function()< init(); >)

Передача значения JavaScript между HTML-страницами: строка запроса URL

Теперь давайте посмотрим на другой метод выполнения той же задачи — использование строки запроса URL. В файле app.js мы снова создали объект Date() и добавили такое же событие нажатия на эту кнопку. Здесь мы использовали window.document.location , где указали целевой HTML-файл, в котором мы будем получать доступ к этим данным. Кроме того, мы добавили ‘?startTime=’ +startTime.getTime() , чтобы эта строка передавалась как URL вместе со временем.

const init = (e) =>< let btn = document.querySelector("#item1"); let startTime = new Date(); btn.addEventListener('click', function()< window.document.location = './index2.html' + '?startTime=' + startTime.getTime(); >); >; document.addEventListener('DOMContentLoaded', function()< init(); >);

Теперь в файле app2.js мы создали еще один объект даты, из которого будем вычитать startTime . Затем мы получим время из строки URL, используя метод window.location.search() . И из этого нам просто нужно получить время или просто данные, для этого мы применим метод замены к этой строке URL. И мы добавили регулярное выражение, чтобы мы могли получить строку URL, кроме данных, и заменили ее пустой строкой.

Наконец, мы просто вычтем данные из текущего времени. Итак, этот метод следует использовать для передачи небольшого количества данных, потому что данные, которые мы передаем, будут отражены в URL-адресе.

"use strict" const init = (e) => < let spn = document.querySelector("#time"); let endTime = new Date(); console.log(endTime); let startTime = window.location.search.replace(/^.*?\=/,''); spn.innerHTML = endTime.getTime() - startTime; >document.addEventListener("DOMContentLoaded", function()< init(); >)

Источник

Общение между окнами и фреймами

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/cross-window-communication.

Элемент iframe является обычным узлом DOM, как и любой другой. Существенное отличие – в том, что с ним связан объект window внутреннего окна. Он доступен по ссылке iframe.contentWindow .

Таким образом, iframe.contentWindow.document будет внутренним документом, iframe.contentWindow.document.body – его и так далее.

В старых браузерах использовались другие свойства, такие как iframe.contentDocument и даже iframe.document , но они давно не нужны.

Переход внутрь ифрейма

В примере ниже JavaScript получает документ внутри ифрейма и модифицирует его:

  var iframe = document.getElementsByTagName('iframe')[0]; var iframeDoc = iframe.contentWindow.document; if (iframeDoc.readyState == 'complete') < iframeDoc.body.style.backgroundColor = 'green'; >iframe.onload = function() 

Атрибут src может использовать протокол javascript , как указано выше: src=»javascript:код» . При этом код выполняется и его результат будет содержимым ифрейма. Этот способ описан в стандарте и поддерживается всеми браузерами.

Атрибут src является обязательным, и его отсутствие может привести к проблемам, вплоть до игнорирования ифрейма браузером. Чтобы ничего не загружать в ифрейм, можно указать пустую строку: src=»javascript:»» или специальную страницу: src=»about:blank» .

В некоторых браузерах (Chrome) пример выше покажет iframe зелёным. А в некоторых (Firefox) – оранжевым.

Дело в том, что, когда iframe только создан, документ в нём обычно ещё не загружен.

При обычных значениях iframe src=»https://learn.javascript.ru/» , которые указывают на HTML-страницу (даже если она уже в кеше), это всегда так. Документ, который в iframe на момент срабатывания скрипта iframeDoc – временный, он будет заменён на новый очень скоро. И работать надо уже с новым документом iframeDoc2 – например, по событию iframe.onload .

В случае с javascript -протоколом, по идее, ифрейм уже загружен, и тогда onload у него уже не будет. Но здесь мнения браузеров расходятся, некоторые (Firefox) всё равно «подгрузят» документ позже. Поэтому факт «готовности» документа в скрипте проверяется через iframeDoc.readyState .

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

Кросс-доменность: ограничение доступа к окну

Элемент является «двуличным». С одной стороны, это обычный узел DOM, с другой – внутри находится окно, которое может иметь совершенно другой URL, содержать независимый документ из другого источника.

Внешний документ имеет полный доступ к как к DOM-узлу. А вот к окну – если они с одного источника.

Это приводит к забавным последствиям. Например, чтобы узнать об окончании загрузки , мы можем повесить обработчик iframe.onload . По сути, это то же самое что iframe.contentWindow.onload , но его мы можем поставить лишь в случае, если окно с того же источника.

Если бы в примере выше был с текущего сайта, то оба обработчика сработали бы.

Иерархия window.frames

Альтернативный способ доступа к окну ифрейма – это получить его из коллекции window.frames .

Обратим внимание: в коллекции хранится именно окно ( contentWindow ), а не DOM-элемент.

Демонстрация всех способов доступа к окну:

Внутри ифрейма могут быть свои вложенные ифреймы. Всё это вместе образует иерархию.

Ссылки для навигации по ней:

• window.frames – коллекция «детей» (вложенных ифреймов)
• window.parent – содержит ссылку на родительское окно, позволяет обратиться к нему из ифрейма. Всегда верно:

// (из окна со фреймом) window.frames[0].parent === window; // true

window.frames[0].frames[0].frames[0].top === window

Свойство top позволяет легко проверить, во фрейме ли находится текущий документ:

Песочница sandbox

Атрибут sandbox позволяет построить «песочницу» вокруг ифрейма, запретив ему выполнять ряд действий.

• Заставляет браузер считать ифрейм загруженным с другого источника, так что он и внешнее окно больше не могут обращаться к переменным друг друга.
• Отключает формы и скрипты в ифрейме.
• Запрещает менять parent.location из ифрейма.

Пример ниже загружает в документ с JavaScript и формой. Ни то ни другое не сработает:

Источник