- PVSM.RU - https://www.pvsm.ru -
Приветствую.
В работу поступила одна задача которая показалась мне интересной. Хотел бы поделиться решением с Хабросообществом.
Существует скрипт который автоматически подключается к каждой посещаемой пользователем странице, задача скрипта опустить весь контент страницы на N пикселей для отрисовки баннера в верхней части страницы. Основные требования были что бы скрипт был един для всех браузеров, а так же что бы верстка не ломалась. Ниже приведу сам скрипт, и некоторые умозаключения. Если интересно — добро пожаловать под кат.
На каждую страницу, сразу после открывающегося тега подключается скрипт который и должен проводить смещение контента.
Первой мыслью было немного оптимизировать сервер, и кроме вставки js оборачивать весь контент в слой с относительным позиционированием, который и сдвигать. Но, увы, с этим вариантом возникло много проблем. Вот основные из них:
Кроме этого было еще множество проблем связаных с этим методом. Если будут желающие — распишу подробнее.
Поскольку прошлый метод был отброшен было принято решение зайти с другой стороны.
Скрипт проходился по всему DOM дереву, и смещал нужные элементы.
Логика алгоритма следующая:
А вот и сам скрипт:
(function(){
_D$ = {
e: {},
g:function(id){
if(typeof _D$.e[id] == "undefined") _D$.e[id] = document.getElementById(id);
return _D$.e[id];
},
c:function(e){
if(typeof e != "undefined" && e.hasChildNodes()) return e.childNodes;
},
s:function(e, s){
if(document.defaultView&&document.defaultView.getComputedStyle){
return document.defaultView.getComputedStyle(e,"").getPropertyValue(s)
}
else if(e.currentStyle){
return e.currentStyle[
s.replace(
/-(w)/g,function(strMatch,p1){
return p1.toLowerCase()
}
)
]
}
return"";
}
}
_B$ = {
w: 600,
h: 100,
insert:function(){
el = document.createElement("div");
el.setAttribute("id", "_HSS_TOP");
el.setAttribute("style", "width: 100% !important; height: "+_B$.h+"px !important; background-color: transparent !important;");
document.body.insertBefore(el, document.body.firstChild);
}
}
_M$ = {
start:function(){
if( document.readyState != "complete")
return setTimeout(arguments.callee, 100);
_M$.shift(document.body, 0);
_B$.insert();
},
shift:function(e, lable){
var e = _D$.c(arguments[0]);
if(typeof e == "undefined") return;
for(var key in e){
if(e[key].nodeType != 1 || e[key].nodeName == "SCRIPT" || e[key].nodeName == "STYLE"){
delete e[key];
continue;
}
var p = _D$.s(e[key], "position"),
l = lable;
if(l == 1 && p != "fixed") p = "";
else{
var d = _D$.s(e[key], "display");
if(d.indexOf("grid") != -1){
e[key].style.position = "relative";
p = "absolute";
}
}
if(p == "absolute" || p == "fixed"){
_M$.shift_e(e[key]);
l = 1;
}else if(p == "relative") l = 1;
_M$.shift(e[key], l);
}
},
shift_e:function(e){
var b = _D$.s(e, "bottom");
if(b != "auto") return;
var t = _D$.s(e, "top");
t += _B$.h;
if(t == "auto") t = 0;
if(t.replace) t = t.replace(/[^0-9-.]+/ig, "")*1;
e.style.top = t+"px";
e.setAttribute("edit", "true");
}
}
_M$.start();
}
)();
P.S. Заранее прошу прощения если что то не так. Уже довольно поздно, топик дописываю из последних сил)
P.P.S. Замечания по грамматическим ошибкам — прошу писать в личку
P.P.P.S. Если у кого то есть идеи по оптимизации алгоритма — с огромнейшим удовольствием выслушаю
Автор: Vendolin
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/20315
Ссылки в тексте:
[1] Источник: http://habrahabr.ru/post/159021/
Нажмите здесь для печати.