Кнопка «Полная версия сайта» для адаптивного дизайна на чистом JavaScript (3)
Я уже как-то писал про кнопку перехода на полную версию сайта для адаптивной верстки. И ее второй вариант. Теперь пришло время показать вариант скрипта на чистом JavaScript без PHP. Подойдет для любого хостинга или любого шаблона без PHP. Запоминание происходит через куки. Ссылка меняет текст после нажатия (скрипт должен находиться ниже ссылки или нужно использовать onload). Срабатывает без перезагрузки страницы.
В header страницы использован вот такой мета-тег мобильной версии:
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
Без сохранения результата:
<a href="javascript: document.
getElementById('vp') .setAttribute('content','width=1024, initial-scale=0.3');" style="border-bottom: 1px dashed #666; text-decoration: none;">Просто ссылка для перехода на полную версию сайта</a> <a href="javascript: document.
getElementById('vp') .setAttribute('content','width=auto, initial-scale=1');" style="border-bottom: 1px dashed #666; text-decoration: none;">Обратно на мобильную версию</a>. Скрипт с запоминанием:
<a href="javascript: desktop();" id="vpbutton" style="border-bottom: 1px dashed #666; text-decoration: none;">Мобильная версия сайта</a>
<script>function mobile() {
document.getElementById('vp').
setAttribute('content','width=auto, initial-scale=1'); document.getElementById('vpbutton').
innerHTML = "Полная версия сайта"; setTimeout("document.getElementById
('vpbutton').href='javascript: desktop();';", 500); SetCookie
("mobile=yes", "0"); }
function desktop() {
document.getElementById('vp')
.setAttribute('content','width=1024, initial-scale=0.3'); document.getElementById('vpbutton')
.innerHTML = "Мобильная версия сайта"; setTimeout("document.getElementById
('vpbutton').href='javascript: mobile();';", 500); SetCookie("mobile=no", "30");
}
//Функция автозапуска
if (document.cookie
.indexOf("mobile=no") != -1) {desktop();} //Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.
toGMTString(); }
</script>
Демо скрипта (будет работать на мобильном устройстве).