Продолжаю разговор про скрытые интересные возможности известных веб обозревателей интернета и локальных html/xhtml страниц. В прошлом посте шла речь о текстовом редакторе в браузере, сегодня же разговор пойдет о более интересной штуке, а именно — графический редактор верстки любого сайта в реальном времени. Да да, именно так, как бы громко это не звучало. Конечно все мы знаем, что можно легко изменить html код любой страницы и сохранить её, после чего у нас получается весьма интересная вещь.
Так же можно взять какой-нибудь offline браузер и скачав определенное количество необходимых страниц сайта как бы получить его локальную копию со всеми вытекающими, но это уже к верстке мало относится, но все же. Пожалуй сам популярный способ онлайнового изменения верстки любого сайта является меню разработчика-верстальщика в web браузере. В данном меню можно изменять характеристики и значения всех элементов на странице, а так добавлять новые и изменять/удалять существующие. В браузерах на движке Gecko (Mozilla Firefox) даже есть встроенные простенький 3D движок, который покажет всю DOM html модель страницы в виде многомерного пирога, когда видишь такое в первый раз немного даже впечатляет.
Ну это все понятно, в этом же посте речь пойдет о немного другом, более удобном и наглядном, способе изменения html кода web страницы. А именно это небольшой JavaScript, который захватывает весь глобальный тег HTML и позволяет нам его редактировать в режиме реального времени! Звучит заманчиво не правда ли? Итак, представляю вам собственно код:
javascript:document.getElementsByTagName('html')[0].contentEditable=true;
Собственно это он, с его помощь всё о чем я писал выше становится доступным. Копируем код и вставляем его в адресную строку браузера на уже открытой странице и тут же открываются возможности для её редактирования любым образом. Будьте внимательны, некоторые браузеры в частности Chrome автоматически убирают слово javascript, поэтому его придется дописывать вручную, иначе работать не будет.
При редактировании можете делать все, что угодно. Кстати если сделали, что то не так, то многоуровневая система возвращений назад (Ctrl+Z) всегда вам поможет.
На этом пожалуй все. Спасибо за внимание.