Как убрать всплывающие окна на сайте

Как то раз у одного из моих клиентов, пользующегося бесплатным хостингом, неожиданно стала всплывать недоброкачественная реклама на сайте. Расследование указало на то, что хостинг просто заразили вирусом. Переезжать на новый хостинг по некоторым причинам было неприемлемо. Файлы самого сайта были вирусом не тронуты. В итоге пришлось искать альтернативные методы вырезания рекламы. Сначала был испробован…

Метод перехвата вывода с чисткой кода после закрывающего тега body

Именно в этом месте в моем случае и оказался вредоносный код. Перед началом вывода был добавлен код:

1
2
3
4
5
6
7
8
9
10
<?php
function antibug($buffer)
{
	// убрать мусор
	$garbageCode = substr(strstr($buffer, "</body>"), 7);
	$buffer = str_replace($garbageCode, "", $buffer)."</html>";
	return $buffer;
}
ob_start("antibug");
?>

А в конце:

1
2
3
<?php
ob_end_flush();
?>

Для большинства страничек на сайте это сработало. Но в некоторых местах реклама полезла опять. Тогда был применен 2-ой способ.

Поднятие слоя с сайтом выше всплывающей рекламы

Способ, строго говоря, не очень хороший, так как вредоносный код он не убирает. Из-за этого если хостинг, к примеру, не вылечится от вируса долгое время, кто знает, могут быть санкции поисковой системы — что мол сайт угрожает безопасности и так далее. Но на первое время пойдет, чтобы реклама не надоедала. В моем случае именно это и нужно было. А делается это просто — элементу содержащему весь сайт (в примере, div с идентификатором class=’site’) назначается следующий код CSS:

1
.site {position:relative; z-index:999999;}

И всё! Реклама на сайте присутствует, но её просто не видно.
Кстати у клиента хостинг все таки вылечился, а указанные меры остались в качестве предосторожности на будущее. Конечно, не панацея, но все же.

Как вставить или заменить любую ссылку во Flash с помощью HTML и CSS

Для вставки или изменения ссылки в swf-файле вовсе не обязательно иметь его исходники и среду разработки. Ниже приведен код, в котором реализована ссылка с баннера, не имеющего внутренней ссылки.

1
2
3
4
5
6
7
8
9
10
<div style="position:relative;">
<a style="position: absolute; width: 100px; height: 100px; left: 0; top: 0; background: url(/images/blank.gif) left top no-repeat;" href="http://www.example.ru"></a>
<object
  type="application/x-shockwave-flash"
  data="/banner.swf"
  width="100" height="100">
    <param name="movie" value="banner.swf">
    <param name="wmode" value="opaque">
    <param name="allowScriptAccess" value="sameDomain" />
</object></div>

В примере используется флешка 100 на 100 пикселей. На неё накладывается ссылка с абсолютным позиционированием. А чтобы это было возможно, swf-файлу присваивается параметр wmode с значением opaque. Для работы данного примера также необходим пустой gif 1 на 1 пиксель, используемый в качестве фона ссылки.

margin: 0 auto и IE

Для выравнивания сайта по центру часто используется следующий код:

1
.site {margin: 0 auto;}

Идентификатор .site указывает на div-обертку шаблона сайта. У большинства браузеров вопросов не возникает, но Internet Explorer прижимает шаблон к левому краю окна. Один из простых вариантов решения этой задачи — добавить в CSS-файл, предназначенный для IE, код указанный ниже:

1
body {text-align: center;}

Теперь выравнивание по центру Internet Explorer должно работать нормально.

Как обрезать Flash с помощью HTML и CSS

Иногда возникает необходимость модифицировать какой либо элемент дизайна сайта, сделанный на Flash. Допустим fla-исходников нет и в помине, и/или среда разработки Flash недоступна. Если вся требуемая модификация сводится к обрезке имеющегося swf-файла, то это проще сделать средствами HTML и CSS. Например это может потребоваться когда шапка сайта сделана во Flash заодно с меню. Если надо поменять только меню, то его можно отрезать от Flash и сделать альтернативное на JavaScript. Рассмотрим два варианта обрезки.

  1. Обрезаем Flash снизу
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <div style="height:175px; overflow:hidden;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>

    В этом случае высота Flash — 200 пикселей, а высота div-контейнера — 175 пикселей. Соответственно swf-файл будет обрезан снизу на 25 пикселей.

  2. Обрезаем Flash сверху
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <div style="height:175px; overflow:hidden;">
    <div style="position:relative; top:-25px;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>
    </div>

    А эта обертка в 2 div-а обрезает swf-файл сверху на 25 пикселей.

В следующем посте рассмотрим как вставить или заменить любую ссылку во Flash с помощью HTML и CSS без вмешательства в сам swf-файл.

Подключение визуального редактора TinyMCE с менеджером картинок к любой CMS

TinyMCE — это очень распространенный и функциональный визуальный (WYSIWYG) редактор для CMS. Сделан редактор на JavaScript с использованием фреймворка jQuery. Хотя подключить его и не сложно, многие сталкиваются с проблемой отсутствия в стандартной поставке менеджера загрузки картинок. Конечно же без него работа с сайтом не будет полноценной. Одним из вариантов решения данной задачи — использование плагина TinyMCE Image Manager.
Предлагаю свой вариант сборки редактора с расширенными настройками и уже подключенным и настроенным плагином Image Manager. Скачать его можно здесь. Все что требуется для начала работы — это распаковать скачанный архив в корень сайта. А затем вставить вот эти 3 строчки кода в шапку сайта, отображаемую в CMS:

1
2
3
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce_init.js"></script>

Для каталогов pic2 и upload2 необходимо назначить права chmod 777. Все настройки вынесены в отдельный файл (/tiny_mce/tiny_mce_init.js), чтобы в случае каких либо изменений не пришлось вновь редактировать шапку.
После установки все поля TEXTAREA будут редактироваться визуально, как показано на скриншоте.
tiny-mce
Если для какого-либо поля необходимо сделать исключение, то нужно назначить ему атрибут: class=’mceNoEditor’. Пример:

1
<textarea class="mceNoEditor" name="descr"><?php echo $descr; ?></textarea>

В этом случае поле будет редактироваться как обычно.