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

Question

rinaz22 @rinaz22

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

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

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

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

Подписаться 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

+1 ещё

Простой
Как при мощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 8 часов назад
- 40 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 10 часов назад
- 19 просмотров
0

ответов
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 12 часов назад
- 46 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 16 часов назад
- 167 просмотров
1

ответ
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 17 часов назад
- 121 просмотр
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 17 часов назад
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- 18 часов назад
- 276 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 19 часов назад
- 103 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 20 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 21 час назад
- 74 просмотра
2

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработать робота для отправки собщений в аське

26 апр. 2024, в 08:24

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

Devops для видео сервиса

26 апр. 2024, в 06:46

1000 руб./в час

Найти ошибку flutter_map

26 апр. 2024, в 05:31

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

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 для всех страниц сайта?

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

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

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