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

Question

[Korneliy]

Много лет использую такой код спойлера часли 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 в коде страницы?

Comments

[Дмитрий Беляев]

https://qna.habr.com/help/rules

4. После размещения вопроса пользователю запрещается осуществлять:
4.1. Дублирование вопроса, который уже размещался на страницах Сервиса. В том числе и в случае, если вопрос был удалён модератором, или на вопрос не был дан ответ (т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания).

4.2. Редактирование вопроса с целью его искажения или замены бессвязным текстом. На работу с каждым вопросом тратят время другие пользователи ресурса: модераторы (на его редактирование) и пользователи (на его прочтение и подготовку ответа). Соответственно, при удалении вопроса, потраченное ими время будет обесценено.

[Korneliy]

Дмитрий Беляев, простите меня пожалуйста, поэтому я и нажал ваш ник.
Пойду изучать Правила!

[dmitry-toster]

Korneliy вы адекватный? вам ведь уже ответили, зачем удалять вопрос и дублировать его еще раз?

[Korneliy]

dmitry-toster, да помилует тя, рабе Б-жий, Наш Г-подь Великомногомилостивый за гадкие слова, произнесенные в сей Светлый Сочельник пред Р-ством Г-пода Нашего Великомногомилостивого!

Answer 1

[Alex]

Вставляйте свой спойлер как обычный html. И добавьте скрипт под ним, который посмотрина на ширину экрана и откроет спойлер если нужно.

if(screen.width < 700){
document.querySelector('details').open = true
}

Или на бэкэнде, смотрите на юзер-агент и добавляйте атрибут open

Comments

[Korneliy]

Сказочно! Благодарю! Всё работает!

[Korneliy]

Интересно, что на ipad некорректно работает.
При этом же в браузерном эмуляторе ipad всё замечательно.

Answer 2

[Сергей Соколов]

Можно оборачивать элемент в ваши теги, и убирать их тоже можно:


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

<div data-summary="текст для ссылки спойлера">
    весь длинный контент, который спрячется, если что
</div>

Сделайте обработчик события изменения размера документа, в котором обёртывать или снимать обёртку автоматом. И один раз запустить этот обработчик при загрузке страницы.

Answer 3

[Андрей Ежгуров]

Что будет, если я на десктопе c шириной экрана 2560px открою страницу в окне браузера шириной 600px?

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

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

Comments

[Korneliy]

Что будет, если я на десктопе открою страницу в окне браузера шириной 600px, а уже после загрузки страницы распахну окно на все 2560px?

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

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

Если бы я знал возможность спрятать часть html под спойлер при определенном разрешении с помощью CSS - с удовольствием это сделал бы. :)

media пользую, но спойлер они не создают и не убирают.

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

А как такого добиться? Если я поставлю display:none, то не будет виден и тот код, который внутри.

[Андрей Ежгуров]

Korneliy, Любой тег вместе с контентом отключается посредством display: none;.
Большинство тегов можно стилизовать так, что их наличие на странице не будет заметно.
Просто надо изначально в вёрстке учитывать все варианты ширины экрана. Сейчас же добавление details и summary выглядит как костыль для поправки непродуманной разметки.

[Korneliy]

Андрей Ежгуров, display: none; ничего не решает. Видимо, решения такого вопроса не существует и придется мириться с document.write...