@Korneliy

Возможно ли заменить document.write?

Много лет использую такой код спойлера часли html для низкого разрешения экрана:
<script>if(screen.width < 700){document.write('<details class="a"><summary></summary>');}else{document.write('');}</script>


Затем идёт html, который виден во всех разрешениях экрана.

А после идёт закрытие спойлера:
<script>if(screen.width < 700){document.write('</details');}else{document.write('');}</script>


Но pagespeed постоянно ругается на document.write.

Можно ли вообще выводить html при определенном разрешении как-то более изысканно? Но чтобы сильно не перегружать кодом страницу. Или придется так и мириться с document.write в коде страницы?
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Вставляйте свой спойлер как обычный html. И добавьте скрипт под ним, который посмотрина на ширину экрана и откроет спойлер если нужно.
if(screen.width < 700){
document.querySelector('details').open = true
}

Или на бэкэнде, смотрите на юзер-агент и добавляйте атрибут open
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Можно оборачивать элемент в ваши теги, и убирать их тоже можно:


Предполагаю, что каждый под-кат на странице будет находиться внутри единственного тега, например, div, которому через дата-атрибут указывается текст ссылки для спойлера:
<div data-summary="текст для ссылки спойлера">
    весь длинный контент, который спрячется, если что
</div>

Сделайте обработчик события изменения размера документа, в котором обёртывать или снимать обёртку автоматом. И один раз запустить этот обработчик при загрузке страницы.
Ответ написан
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
Что будет, если я на десктопе c шириной экрана 2560px открою страницу в окне браузера шириной 600px?

Не нужно менять генерируемый HTML-код в зависимости от ширины экрана. Нужно менять отображение единого контента в зависимости от ширины окна браузера - посредством media в CSS.

Какая, собственно, разница - есть details и summary в коде или их нет - если при ширине окна браузера >= 700px наличие этих тегов не будет заметно?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽