Javascript + CSS :: • блок • текст • линк • меню • фото • окно • кнопка • фон

ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS

Букмарклет(bookmarklet) - это javascript-код, который сохраняется как закладка в браузере. Он работает за счет использования протокола <a href="javascript:...">.

Выбирая такую закладку, вы запускаете яваскрипт-код в контексте текущей страницы. А дальше он уже может делать что угодно: править страницу, делать запросы к серверу и, вообще, использовать всю мощь современного javascript.

Поэтому де-факто букмарклет - это javascript-плагин к браузеру.

Букмарклеты - JavaScript в адресной строке
Букмарклет (bookmarklet) — небольшая JavaScript-программа, сохраняемая как браузерная закладка.

Современные браузеры поддерживают несколько протоколов. Наиболее часто нами используется протокол http, для получения гипертекстовых документов. Реже используется ftp-протокол для обмена файлами, а вот о протоколе javascript слышали немногие. Адрес, записанный в протокоде javascript выглядит так:

javascript: /*здесь любой js-код в одну строку*/alert('I am bookmarklet!');

ссылка

В результате помещения этого адреса в адресную строку браузера выполнится следущий за javascript: js-код. В данном случае мы увидим окно-предупреждение с текстом 'I am bookmarklet!'. Как и любой другой адрес, javascript-адреса можно размещать в обычных ссылках и добавлять в закладки.
Безопасность

При кликах по неблагонадежным ссылкам следует быть осторожным, вместе с переходом на другой вы можете передать данные о текущей сессии злоумышленникам. Например, эта ссылка лишь покажет вам куку для текущей страницы, хотя могла бы передать эту куку на ресурс злоумышленника с прочими данными.
Создание букмарклетов

У браузеров есть ограничение на длину букмарклетов, причем у каждого браузера оно свое. Экспериментальным путем автор выяснил, что самой жесткое ограничение у IE (Internet Explorer) — 500 символов. У остальных браузеров тоже есть лимит, но он больше и автор поленился его высчитывать.

Таким образом, при написании букмарклета лучше максимально сокращать имена переменных и функций. В идеале до одного символа.

Следующее ограничение диктуется форматом адреса — весь код должен быть написан в одну строку, иначе никак...

И последнее. Удобно записывать код в виде анонимной функции, вызываемой сразу после объявления, чтобы не получилось пересечения переменных букмарклета с переменными на странице.

Учитывая всё вышеперечисленное напишем простой букмарклет, который будет выводить адреса всех подключенных CSS-файлов на странице.

javascript:(function() {var d,b,c,cs,s,i;d=document;b=d.body;if(!b) return;s=document.getElementsByTagName('link');if(!s.length) return;c=d.createElement('span');cs=c.style;cs.position='absolute';cs.top=cs.left=0;cs.background='#EEE';for (i=0;i<s.length;i++)if(s[i].type=='text/css')c.innerHTML+='<a href=\''+s[i].href+'\'>'+s[i].href+'<\/a><br>';b.appendChild(c);window.scrollTo(0,0);})();

ссылка

Букмарклет показывает скрытые элементы форм как поля, и позволяет редактировать их значения.

javascript:(function(){var i,f,j,e,div,label,ne; for(i=0;f=document.forms[i];++i)for(j=0;e=f[j];++j)if(e.type=="hidden"){ D=document; function C(t){return D.createElement(t);} function A(a,b){a.appendChild(b);} div=C("div"); label=C("label"); A(div, label); A(label, D.createTextNode(e.name + ": ")); e.parentNode.insertBefore(div, e); e.parentNode.removeChild(e); ne=C("input");/*for ie*/ ne.type="text"; ne.value=e.value; A(label, ne); label.style.MozOpacity=".6"; --j;/*for moz*/}})()

ссылка

Отключает все стили, используемые на странице.

javascript:(function(){var i,x;for(i=0;x=document.styleSheets[i];++i)x.disabled=true;})();

ссылка

Подсвечивает все слова на странице, содержащие искомые символы.
Находит и подсвечивает все слова, содержащие искомые символы, кроме случаев, когда фраза прерывается другим элементом.
Например, букмарклет найдет слова "Paul McGarry" и "искомые слова", но не фразу "на скрипте" в абзаце, что идет ниже.

javascript:(function(){var count=0, text, dv;text=prompt("Search phrase:", "");if(text==null || text.length==0)return;dv=document.defaultView;function searchWithinNode(node, te, len){var pos, skip, spannode, middlebit, endbit, middleclone;skip=0;if( node.nodeType==3 ){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="yellow";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else if( node.nodeType==1&& node.childNodes && node.tagName.toUpperCase()!="SCRIPT" && node.tagName.toUpperCase!="STYLE"){for (var child=0; child < node.childNodes.length; ++child){child=child+searchWithinNode(node.childNodes[child], te, len);}}return skip;}window.status="Searching for '"+text+"'...";searchWithinNode(document.body, text.toUpperCase(), text.length);window.status="Found "+count+" occurrence"+(count==1?"":"s")+" of '"+text+"'.";})();

ссылка

Позволяет сортировать ряды в таблицах на веб-странице по алфавиту.
Добавляет еще один ряд сверху каждой таблицы со ссылками "a" и "d" над каждой колонкой. Щелкнув по ссылке, вы отсортируете таблицу в убывающем или возрастающем порядке по данной колонке. Сортировка идет по HTML-коду, так что если в колонке присуствуют ссылки, ряды со ссылками будут идти первыми.

javascript:function toArray (c){var a, k;a=new Array;for (k=0; k<c.length; ++k)a[k]=c[k];return a;}function insAtTop(par,child){if(par.childNodes.length) par.insertBefore(child, par.childNodes[0]);else par.appendChild(child);}function countCols(tab){var nCols, i;nCols=0;for(i=0;i<tab.rows.length;++i)if(tab.rows[i].cells.length>nCols)nCols=tab.rows[i].cells.length;return nCols;}function makeHeaderLink(tableNo, colNo, ord){var link;link=document.createElement('a');link.href='javascript:sortTable('+tableNo+','+colNo+','+ord+');';link.appendChild(document.createTextNode((ord>0)?'a':'d'));return link;}function makeHeader(tableNo,nCols){var header, headerCell, i;header=document.createElement('tr');for(i=0;i<nCols;++i){headerCell=document.createElement('td');headerCell.appendChild(makeHeaderLink(tableNo,i,1));headerCell.appendChild(document.createTextNode('/'));headerCell.appendChild(makeHeaderLink(tableNo,i,-1));header.appendChild(headerCell);}return header;}g_tables=toArray(document.getElementsByTagName('table'));if(!g_tables.length) alert("This page doesn't contain any tables.");(function(){var j, thead;for(j=0;j<g_tables.length;++j){thead=g_tables[j].createTHead();insAtTop(thead, makeHeader(j,countCols(g_tables[j])))}}) ();function compareRows(a,b){if(a.sortKey==b.sortKey)return 0;return (a.sortKey < b.sortKey) ? g_order : -g_order;}function sortTable(tableNo, colNo, ord){var table, rows, nR, bs, i, j, temp;g_order=ord;g_colNo=colNo;table=g_tables[tableNo];rows=new Array();nR=0;bs=table.tBodies;for(i=0; i<bs.length; ++i)for(j=0; j<bs[i].rows.length; ++j){rows[nR]=bs[i].rows[j];temp=rows[nR].cells[g_colNo];if(temp) rows[nR].sortKey=temp.innerHTML;else rows[nR].sortKey="";++nR;}rows.sort(compareRows);for (i=0; i < rows.length; ++i)insAtTop(table.tBodies[0], rows[i]);}

ссылка

Превращает ряды таблиц в колонки, а колонки - в ряды, и наоборот.
Учитывает rowspan и colspan, а также по возможности старается соблюсти цвет фона в ячейках.

javascript:(function(){var d=document,q="table",i,j,k,y,r,c,t;for(i=0;t=d.getElementsByTagName(q)[i];++i){var w=0,N=t.cloneNode(0);N.width="";N.height="";N.border=1;for(j=0;r=t.rows[j];++j)for(y=k=0;c=r.cells[k];++k){var z,a=c.rowSpan,b=c.colSpan,v=c.cloneNode(1);v.rowSpan=b;v.colSpan=a;v.width="";v.height="";if(!v.bgColor)v.bgColor=r.bgColor;while(w<y+b)N.insertRow(w++).p=0;while(N.rows[y].p>j)++y;N.rows[y].appendChild(v);for(z=0;z<b;++z)N.rows[y+z].p+=a;y+=b;}t.parentNode.replaceChild(N,t);}})()

ссылка

Определяет цветовую палитру страницы и показывает её в новом окне. В палитре не присутствуют цвета, заданные с помощью псевдоклассов :hover, :active, :focus и т.п.

javascript:(function(){var colorInfo={all:new Array(),sorted:new Array(),foreground:new Array(),background:new Array(),border:new Array()}; function getColor(element,property){if(!window.getComputedStyle){return '';} var v=document.defaultView.getComputedStyle(element, null).getPropertyValue(property); if(v.search(/#\w{6}/)!=-1){return v;}return '';} function getColorComponents(cssColor){var rgb=new Array(); for(var i=1;i<6;i+=2){var s=cssColor.substr(i,2); if(s&&s.length==2){s='0x'+s; s=parseInt(s); rgb.push(s);}} if(rgb.length==3){var s=0; for(var i=0;i<rgb.length;i++){s+=rgb[i];} rgb.push(s);}return rgb;} function addColor(cssColor){var c=getColorComponents(cssColor); if(c&&!colorInfo.all[cssColor]){colorInfo.all[cssColor]=c; if(c[3]!=undefined){colorInfo.sorted[c[3]]=cssColor;}}} function addForegroundColor(cssColor){addColor(cssColor); if(!colorInfo.foreground[cssColor]){colorInfo.foreground[cssColor]='1';}} function addBackgroundColor(cssColor){addColor(cssColor);if(!colorInfo.background[cssColor]){colorInfo.background[cssColor]='1';}} function addBorderColor(cssColor){addColor(cssColor); if(!colorInfo.border[cssColor]){colorInfo.border[cssColor]='1';}} function getColors(){var t=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,null,false); var e=t.nextNode(); var action=[[addForegroundColor,'color'],[addBackgroundColor,'background-color'],[addBorderColor,'border-top-color'],[addBorderColor,'border-bottom-color'],[addBorderColor,'border-right-color'],[addBorderColor,'border-left-color']]; while(e!=null){for(var i=0;i<action.length;i++){var c=getColor(e,action[i][1]); if(c){action[i][0](c);}} e=t.nextNode();}} function getRGB(cssColor){with(colorInfo){if(cssColor&&all[cssColor]){return (all[cssColor][0]+', '+all[cssColor][1]+', '+all[cssColor][2]);}} return '';} function getUrl(){var url=''; with(window.location){url=protocol+'//'+host+pathname; if(search){url+='?...';}else if(hash){url+='...';}} return url;} function display(){getColors(); var wnd=window.open(); with(wnd.document){write('<html><head><title>Color Information</title><style type=\x22text\/css\x22>\nbody {color: #000; background-color: #fff; font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;margin: 0; padding: 0;}\np {margin: 1em 0;}\ndiv {padding: 0; margin: 0;}\n#main {text-align: center;}\n#cnt {margin: 0 auto; padding: 10px; text-align: left;}\nh1 {color:#404040; font-size: 16pt; font-weight: normal; text-align: center; margin: 0;}\nh2 {color:#404040; font-size: 12pt; font-weight: bold; text-align: left; margin: 1.5em 0 1em 0;}\n#colors {}\n.section {background-color: #f5f5f5; border: 1px solid #d0d0d0;}\ndd {border: 1px solid #000000; height: 50px; width: 50px;}\ndd, dt {margin: 0; padding: 0;}\ndl {float: left; margin: 1em; padding: 0;}\ndt {font-size: 8pt; text-align: center;}\n.spacer {clear: both; font-size: 0 !important; height: 0 !important;}\n.url {font-size: 12pt; font-weight: normal;}\n<\/style><\/head>\n<body><div id=\x22main\x22><div id=\x22cnt\x22><h1>Color Information - \n<span class=\x22url\x22 title=\x22'+window.location.href+'\x22>'+getUrl()+'<\/span><\/h1>\n<div id=\x22colors\x22>'); with(colorInfo){var info=[[all, 'All'],[foreground, 'Foreground'],[background, 'Background'],[border, 'Border']]; for(var i=0;i<info.length;i++){var s='',count=0; for(var j in sorted){var c=sorted[j]; if(info[i][0][c]){s+='<dl><dt>'+c+'<\/dt><dd style=\x22background-color:'+c+'\x22 title=\x22'+getRGB(c)+'\x22><\/dd><dt><\/dl>\n'; count++;}} write('<h2>'+info[i][1]+' ('+count+')<\/h2>\n<div class=\x22section\x22>\n<div class=\x22spacer\x22><\/div>\n'+s+'<div class=\x22spacer\x22><\/div>\n<\/div>\n\n');}} write('<\/div><\/div><\/div><\/body><\/html>');}} display();})();

ссылка

Букмарклет для всех браузеров

Создает несколько полезных вкладок

javascript:function%20fnStartDesign(sUrl)%20{var%20nScript%20=%20document.createElement('script');nScript.setAttribute('language','JavaScript');nScript.setAttribute('src',sUrl);document.body.appendChild(nScript);}fnStartDesign('http://www.sprymedia.co.uk/design/design/media/js/design-loader.js');

ссылка

Открытие двух страниц на одном экране

javascript:A14nH=location.href;L3f7=prompt('Choose%20File%201',A14nH);R1Gh7=prompt('Choose%20File%202',L3f7);if(L3f7&&R1Gh7){Fr4Q='<frameset%20cols=\'*,*\'>\n<frame%20src=\''+L3f7+'\'/>';Fr4Q+='<frame%20src=\''+R1Gh7+'\'/>\n';Fr4Q+='</frameset>';with(document){write(Fr4Q);void(close())}}else{void(null)}

Ссылка

Bookmarklet	Description
search links	Lists all links on the page containing the specified text. Details
linked images	Opens a window showing all images linked to from the current page. Details
linked pages	Opens a window showing all pages linked to from the current page. Details
hide visited	Hides visited links. Details
int/ext links	Colors internal links red, external links blue, and in-page links orange. Details
open all links	Opens each link on the page in a new window. Details
open selected links	Opens each link within the selection in a new window. Details
target this window	Makes links open in the same window (when you click them). Details
target new windows	Makes links open in new windows. Details
target new bg windows	Makes links open in new windows behind the current window. Details
target one new window	Makes links open in one new window. Details
remove redirects	Changes redirecting links to go directly to the "real" target. Details
hrefs as link text	Changes the text of links to match their hrefs. Details
full urls as link text	Changes the text of links to match their absolute urls. Details

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011