Как сделать onload для всех страниц сайта?

Question

rinaz22 @rinaz22

Как сделать onload для всех страниц сайта?

Всем привет. Хочу сделать заглушку для сайта, но очень много страниц. Обычные html страницы.
Как разом можно сделать onload для всех страниц, чтобы не установить код вручную на все страницы?
Можно ли как-то через js это сделать?

Вопрос задан более трёх лет назад
43 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

6 комментариев

rinaz22 @rinaz22 Автор вопроса

А как сделать заглушку

Написано более трёх лет назад

Vitaliy Orlov @orlov0562

1. Создай скрипт script.js с таким содержимым

let body = document.getElementsByTagName('body')[0];
body.style.display = 'none';
document.addEventListener('DOMContentLoaded', function(){ 
    body.innerHTML = 'заглушка';
    body.style.display = 'block';
}, false);

2. в html файлы помести его в секции head

..
<head>
...
<script src="script.js"></script>
</head>

Написано более трёх лет назад

rinaz22 @rinaz22 Автор вопроса

Vitaliy Orlov, а что за файл stub.html?

Написано более трёх лет назад
Vitaliy Orlov @orlov0562

stub.html - файл заглушка, который будет отображаться при любых запросах. Т.е. например у тебя есть такие файлы:
- index.html
- about.html
- contact.html
- stub.html

если ты добавишь туда файл .htaccess с содержимым указанным выше, то при запросах к любому url:
- site.com/index.html
- site.com/about.html
- site.com/contact.html
- site.com/stub.html

у тебя будет отображаться stub.html

Написано более трёх лет назад
rinaz22 @rinaz22 Автор вопроса

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

Написано более трёх лет назад

Vitaliy Orlov @orlov0562

rinaz22, я за другую заглушку подумал, по типу "Сайт временно не доступен, приходите позже".

Твое решение будет выглядеть так
script.js

let body = document.getElementsByTagName('body')[0];
let stub = document.createElement('div');
stub.innerHTML = 'Загрузка..';
stub.style.position = 'fixed';
stub.style.width = '100%';
stub.style.height = '100%';
stub.style.top = 0;
stub.style.left = 0;
stub.style.backgroundColor = "black";
stub.style.color = "white";
body.appendChild(stub);
document.addEventListener('DOMContentLoaded', ()=>{ 
    stub.style.display = 'none';
}, false);

во все html в body надо добавить

...
<body>
<script src="script.js">
...

Вот все в одном файле для теста + setTimeout, чтобы имитировать загрузку

<!doctype html>
<html>
    <body>
        <script>
            let body = document.getElementsByTagName('body')[0];
            let stub = document.createElement('div');
            stub.innerHTML = 'Загрузка..';
            stub.style.position = 'fixed';
            stub.style.width = '100%';
            stub.style.height = '100%';
            stub.style.top = 0;
            stub.style.left = 0;
            stub.style.backgroundColor = "black";
            stub.style.color = "white";
            body.appendChild(stub);
            document.addEventListener('DOMContentLoaded', ()=>{ 
                setTimeout(()=>{
                    stub.style.display = 'none';
                }, 1000);
            }, false);            
        </script>
        <p>Контент сайта</p>
    </body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 5 часов назад
- 41 просмотр
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 5 часов назад
- 80 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 14 часов назад
- 82 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 111 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 91 просмотр
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- 21 дек.
- 1697 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 59 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 102 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Cоздание 3d сцены с симуляцией пызырьков

23 дек. 2024, в 16:13

50000 руб./за проект

Сбор данных из HH

23 дек. 2024, в 15:25

5000 руб./за проект

Сделать js-модуль для Тильды

23 дек. 2024, в 14:47

4500 руб./за проект

Answer 1 · 2019-02-05 16:14:35

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

(function() {
    console.log('loaded');
})();

Если тебе надо просто сделать заглушку и у тебя apache, то проще всего создать файл .htaccess с таким содержимым

RewriteEngine On
RewriteCond %{ENV:REDIRECT_STATUS} !=503
RewriteRule ^ stub.html [L, R=503]

Как сделать onload для всех страниц сайта?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт