Различия

Показаны различия между двумя версиями страницы.

@@ Строка 1: / Строка 1: @@
+====== Букмарклеты: как с помощью клиентского JS кода сделать со страницей всё, что угодно ======
+~~Title: Букмарклеты: примеры JavaScript кода для трансформации вебстраниц ~~
+{{htmlmetatags>
+metatag-description=(Узнайте, что такое букмарклеты, как их использовать для расширения функциональности браузера и ознакомьтесь с практическими примерами JavaScript-закладок для анализа страниц, изменения дизайна и помощи в веб-разработке.)
+}}
+{{ ::icon-bookmarklet.png?nolink&400 |}}
+**Букмарклет** (англ. bookmarklet; bookmark — «закладка» и applet — «апплет») — небольшая JavaScript-программа, оформленная как javascript: URL и сохраняемая как браузерная закладка. Букмарклет - это обычная закладка для браузера, которая содержит не URL, а [[JavaScript]].
+**Использование**
+Букмарклеты используются как инструменты, придающие браузеру дополнительную функциональность. По сути, это клиентский код, который может сделать со страницей все, что вам угодно. Они могут, к примеру:
+  * поменять внешний вид страницы (цвета, размер букв, и т. д.),
+  * извлечь данные из страницы, например, все ссылки или все используемые изображения,
+  * перейти (для удобства обычно в новом окне) к результатам поиска выделенных на странице слов,
+  * сделать страницу более удобной для чтения (увеличить шрифт, убрать яркий фон и мигающие элементы) и взаимодействия (расширить поля ввода, подчеркнуть все ссылки),
+  * помочь веб-разработчику — показать имена стилей, классов, свойства элементов, произвести операции с [[cookie]].
+Перед использованием букмарклета нужно занести его к себе в закладки. Проще всего это сделать переносом готовой ссылки-букмарклета со страницы прямо на панель закладок.
+===== Примеры bookmark =====
+<file html>
+<body>
+        <div>
+            <h1>Примеры букмарклетов</h1>
+[<a href="javascript:void(document.body.style.backgroundColor='gray');">Окрашивает фон страницы в серый цвет.</a> ]
+        </div>
+        <div>
+[<a href="javascript:var firebug=document.createElement('script');
+firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');
+document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);"
+>Вызывает на текущей странице firebug lite.</a> ]
+        </div>
+            <div>
+                <hr><font size="1">
+                Документ: <i><script type="text/javascript">document.write(document.title);</script></i><br>
+                URL: <i><script type="text/javascript">document.write(document.URL);</script></i><br>
+                Дата последнего обновления:
+                <i><script type="text/javascript">document.write(document.lastModified);</script></i>
+                </font>
+            </div>
+        </div>
+</body>
+</file>
+  * **Букмарклет Анализ ссылок на текущей странице**
+<file html>
+            <div>
+                <p></p>
+                [<a href="javascript:
+                    var tag_a = document.getElementsByTagName('a');
+                    var kolvo='<b>Общее кол-во ссылок на странице:</b> '+tag_a.length+'<br/>';
+                    var display=''; var kloc_url=0;var kext_url=0;
+                    var domain= document.domain;/*экранируем все точки в имени домена*/
+                    domain.replace(/./, '\.');
+                    var r = new RegExp ('http://'+domain+'.*');
+                    for (var k=0; k<tag_a.length; k++) {
+                    var tg1=tag_a[k].getAttribute('href');
+                    if ((tg1 == '#') || (tg1 == '/') || (r.test(tg1)))
+                    {
+                    kloc_url++;
+                    }
+                    else{
+                    kext_url++;
+                    display += tag_a[k].getAttribute('href')+'<br/>';
+                    }
+                    }
+                    document.write(r+kolvo+'Внутренние сслыки= '+kloc_url+'<br/><b>Внешние ссылки=</b> '+kext_url+'<br/>' + display);
+                    window.stop();
+                    ">Анализ ссылок на текущей странице</a>]
+            </div>
+</file>
+<panel type="primary" title="Читайте также">
+  * [[json]]
+  * [[nodejs]]
+  * [[ReactJS]]
+</panel>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

Различия

7 Самых Популярных Статей

7 Самых Популярных Обзоров