Firefox не помогает, перезагружая iframe

Содержание

Вопрос или проблема
Ответ или решение
Проблема и её особенности
Решение проблемы
Дополнительные рекомендации
Заключение

Вопрос или проблема

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

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

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

Однако… в Firefox (только в нем, похоже), если я обновляю саму родительскую страницу (по какой-либо причине), то Firefox «доброжелательно» автоматически перезагружает iframe и выполняет запуск сразу же. В результате звук не воспроизводится.

Я хочу избежать необходимости помнить о том, чтобы сделать жесткое обновление родительской страницы, или помнить о том, чтобы кликнуть после того, как я сделаю мягкое обновление, и пока не нашел решения. Браузер Chrome этого не делает, но я предпочитаю использовать Firefox.

Вот что я попробовал, но это не работает.

<script>
var launched = false;
function launch()
{
 console.log("Запуск: launched = " + launched);
 if (!launched)
   {
    document.getElementById("framex").src = "checkalive1.shtml";
    launched = true;
   }
}
function virginstate()
{
 console.log("virginstate вызван с launched = " + launched);
 document.getElementById("framex").src = "";
 launched = false;
}
</script>

<body onload="virginstate()" onclick="launch()">
<iframe id="framex" src=""> </iframe>
</body>

и в консоли браузера:

virginstate вызван с launched = false

Автовоспроизведение разрешено только при одобрении пользователя, 
если сайт активирован пользователем или медиа без звука.


checkalive1.shtml:168:7 Uncaught (in promise) DOMException: 
Метод play не разрешен пользовательским агентом или платформой 
в текущем контексте, возможно, потому что пользователь отказал в разрешении.

Ответ или решение

Вопрос, с которым вы сталкиваетесь, связан с особенностями работы браузера Firefox и его поведением при перезагрузке главной страницы, которая содержит iframe. Давайте подробно рассмотрим решение данной проблемы.

Проблема и её особенности

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

Тем не менее, в Firefox происходит непредвиденное поведение: при обновлении родительской страницы iframe также перезагружается автоматически, что приводит к немедленному срабатыванию функции launch() и воспроизведению звука, без одного клика пользователя, что противоречит правилам браузера о воспроизведении мультимедийного контента без взаимодействия.

Решение проблемы

Для предотвращения автоматического восстановления состояния iframe после обновления родительской страницы, вы можете воспользоваться следующими методами:

Использование локального хранилища: Храните состояние загрузки iframe в localStorage или sessionStorage, что позволит вам восстанавливать только необходимые состояния.
События окна: Для управления состоянием iframe вы можете добавить обработчики событий, такие как visibilitychange или beforeunload, чтобы предотвратить перезагрузку или удалить содержимое iframe.
Проверка состояния: В самом iframe добавьте логику, которая будет проверять состояние перед воспроизведением звука.

Пример кода с использованием localStorage для сохранения состояния:

<script>
function launch() {
    console.log("Запуск: launched = " + localStorage.getItem("launched"));
    if (localStorage.getItem("launched") !== "true") {
        document.getElementById("framex").src = "checkalive1.shtml";
        localStorage.setItem("launched", "true");
    }
}

function virginstate() {
    console.log("virginstate вызывается с launched = " + localStorage.getItem("launched"));
    document.getElementById("framex").src = "";
    localStorage.removeItem("launched");
}

window.onload = function() {
    virginstate();
    document.addEventListener('click', launch);
};

// Вы можете также обрабатывать событие перезагрузки страницы
window.addEventListener('beforeunload', function() {
    localStorage.removeItem("launched");
});
</script>

<body>
    <iframe id="framex" src=""></iframe>
</body>

Дополнительные рекомендации

Кроссбраузерное тестирование: Убедитесь, что ваш код работает не только в Firefox, но и в других браузерах, таких как Chrome. Это позволит избежать проблем совместимости.
Обновление контента без перезагрузки: Рассмотрите возможность использования AJAX для обновления содержимого iframe без полной перезагрузки. Это позволит вам сохранять пользовательскую интеракцию.
Ошибка воспроизведения звука: Убедитесь, что при воспроизведении звука в iframe пользователю предоставляется интерактивный элемент, который поможет обойти ограничения браузера.

Заключение

Решение проблемы с поведением iframe в Firefox требует внедрения дополнительных логик управления состоянием, что позволит избежать нежелательных автоматических действий. Использование localStorage и обработка событий поможет создать наиболее качественный пользовательский опыт. Обязательно протестируйте свои изменения на разных браузерах, чтобы убедиться в универсальности решения.