НТВ плюс 

Как вставить в HTML iframe: пример использования. Iframe и Frame — что это такое и как лучше использовать фреймы в Html Создание структуры на основе Frameset и его атрибутов Cols и Rows

Сделали аналог инструмента Google Webmaster Marker. Напомню, что Marker это инструмент в кабинете Google Webmaster, который позволяет аннотировать ваши страницы Open Graph тегами. Для этого вы просто выделяете мышкой кусок текста на странице и указываете что это title, а это рейтинг. Ваша страница при этом грузится в Iframe в кабинете вебмастера.

Теперь Google, встретив подобную страницу на вашем сайте, уже знает, что за контент на ней опубликован, и как его красиво распарсить в сущность (статью, товар, видео..)

Нам был нужен подобный функционал. Задача казалась несложной и исключительно клиентсайд. Однако на практике решение лежит на стыке клиентсайда и серверсайда («чистые» JS программисты могу ничего не знать про различные прокси серверы и очень долго подходить к снаряду). При этом я не нашел в интернетах статью которая описывала бы всю технологию от начала до конца. Также хочется сказать спасибо пользователю BeLove и нашим безопасникам за помощь.

В нашем случае хотелось чтобы вебмастер мог удобно (пометив мышкой) получить значение xPath к определенным элементам на своей странице.

Iframe «Same Origin» И так в нашей админке человек должен ввести URL страницы своего сайта, мы отобразим ее в iFrame, человек тыкнет мышкой куда надо, мы получим искомый xPath. Все бы ОК, но у нас нет доступа к контенту страницы с другого домена загруженной в iframe в нашей админке (наш домен), из за политики безопасности браузера.CORS - Cross origin resource sharing Одни люди мне посоветовали использовать CORS. Модная технология которая решает множество проблем с доступом к контенту с другого домена в браузере и позволяет обойти same origin policy ограничения.
Сайт который хочет дать доступ к своему контенту на страницах чужого домена просто пишет в http заголовок:
Access-Control-Allow-Origin: http://example.com
А в заголовоке http запроса идущего со страницы другого домена из браузера должно быть поле origin:
Origin: www.mysupersite.com
понятно что поле origin к запросу браузер дописывает сам. Плюсанем статью на Хабре и увидим что современные браузеры добавляют Origin даже к запросу на тот же самый домен:

Однако:

  • браузер не проставляет origin в загловке запроса на страницу загружаемую в iframe (кто-нибудь может пояснить почему?)
  • мы не хотим просить вебмастеров прописывать заголовок Access-Control-Allow-Origin
    • Iframe sandbox Еще одна модная технология. Sandbox это атрибут тега Iframe. В качестве одного из значений этого атрибута можно выставить значение allow-same-origin . До того как я начал копать эту тему я не знал что точно делает этот аттрибут, а звучало очень заманчиво. Однако атрибут sandbox просто ограничивает то, что может делать страница загруженная в iframe и не имеет отношения к проблеме доступа из родительского документа к содержимому фрейма.

    Конкретно значение allow-same-origin (вернее его отсутствие) всего лишь говорит что iframe нужно всегда расценивать как загруженный с чужого домена (нельзя например из такого фрейма послать AJAX запрос на домен родительского документа)

    Посмотрим как сделано у Google Время рисеча того, как сделано у большого брата

    Обратим внимание на аттрибут src элемента iframe: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - наша страница грузится в админку с домена Google. Далее еще более сурово: даже скрипты и картинки в исходном документе прогоняются через прокси. Все src, href… заменены в html на проксированные. Примерно вот так:

    Все ресурсы которые использует ваша страница еще и сохраняются на прокси серверах Гугл. Вот например наш .

    CGIProxy? Сразу показалось, чтобы сделать тоже самое нужно поднимать полноценный прокси по типу CGIProxy . Этот прокси сервер делает примерно тоже самое, чем промышляет гугловский wmthighlighter.googleusercontent.com
    Visit the script"s URL to start a browsing session. Once you"ve gotten a page through the proxy, everything it links to will automatically go through the proxy. You can bookmark pages you browse to, and your bookmarks will go through the proxy as they did the first time. Свой Proxy! Однако, если сузить задачу, написать простой proxy намного проще самому. Дело в том, что делать так делает Google, прогоняя весь контент страницы через прокси совершенно не обязательно. Нам просто нужно чтобы html любой страницы отдавался с нашего домена, а ресурсы можно подгрузить и из оригинального домена. Https мы пока отбросили.
    Задача супер производительности или удобств настроек здесь не стоит, и сделать это можно по быстрому и на чем угодно, от node.js до php. Мы написали сервлет на Java.Качаем страницу Что должен делать прокси сервлет? Через get параметр получаем url страницы которую нужно загрузить, далее качаем страницу.

    Обязательно определяем кодировку страницы (через http ответ или charset в html) - наш прокси должен ответить в той же кодировке что и страница которую мы загрузили. Так же определим Content-Type на всякий случай, хотя и так понятно что мы получаем страницу в text/html и отдадим ее так же.
    final String url = request.getParameter("url"); final HttpGet requestApache = new HttpGet(url); final HttpClient httpClient = new DefaultHttpClient(); final HttpResponse responseApache = httpClient.execute(requestApache); final HttpEntity entity = responseApache.getEntity(); final String encoding = EntityUtils.getContentCharSet(entity); final String mime = EntityUtils.getContentMimeType(entity); String responseText = IOUtils.toString(entity.getContent(), encoding);
    *Для любителей оценить чужой код: у нас в команде у всех одинаковые настройки форматирования кода eclicpse, и при сохранении файла эклипс сам дописывает ко всем переменным final если они более нигде не меняются. Что кстати довольно удобно в итоге.

    Меняем относительные URL на абсолютные в коде страницы Надо пройтись по всем атрибутам с src и href в странице (пути файлов стилей, картинки), и заменить относительные урлы на абсолютные. Иначе страница будет пытаться загрузить картинки с каких-то папок на нашем прокси, которых у нас естественно нет. В любом языке есть готовые классы или можно найти сниппеты кода для этого дела на stackoverflow:
    final URI uri = new URI(url); final String host = uri.getHost(); responseText = replaceRelativeLinks(host,responseText); Отсылаем html Вот и все, прокси сервлет готов. Посылаем ответ, выставив нужную кодировку и mime.
    protected void sendResponse(HttpServletResponse response, String responseText, String encoding, String mime) throws ServletException, IOException { response.setContentType(mime); response.setCharacterEncoding(encoding); response.setStatus(HttpServletResponse.SC_OK); response.getWriter().print(responseText); response.flushBuffer(); } Деплоим и тестим Деплоим наш прокси сервлет на том же адресе, что и админка adminpanel.indexisto.com , грузим в наш iframe страницу сайта вебмастера через прокси и все кроссдоменные проблемы исчезают.
    Наш прокси работает по адресу
    http://adminpanel.indexisto.com/highlighter?url=http://habrahabr.ru
    - вот так хабр загрузится с нашего домена. Отдаем этот адрес в iframe и пробуем получить доступ к DOM дереву хабра через JS в админке - все работает. CSRF естественно не пройдет так как страница загружена с нашего прокси у которого нет куки.Проблемка SSRF Загрузим в наш iframe сайт с адресом «localhost» - опа, вот стартовая страница нашего nginx. Попробуем какой-нибудь внутренний (не видный наружу) ресурс в той же сети, что и наш прокси сервер. Например secured_crm.indexisto.com - все на месте.
    Конечно пытаемся запретить эти вещи в нашем прокси, в случае если кто-то пытается запроксировать localhost мы выходим ничего не возвращая:
    if (url.contains("localhost")||url.contains("127")||url.contains("highlighter")||url.contains("file")) { LOG.debug("Trying to get local resource. Url = " + url); return; }
    но всех ресурсов сети мы здесь явно не перечислим. Значит надо вынести прокси в совершенно изолированную среду, чтобы машина ничего не видела кроме интернета, себя самой и нашего прокси. Выделяем машину, настраиваем и заводим наш сервлет там.Проблемка XSS Загрузим в наш iframe свою страничку на которой напишем:
    alert("xss")
    Всплывает алерт. Печально. Это можно обойти атрибутом iframe sandbox allow-scripts , однако как быть со старыми браузерами которые этот атрибут не очень понимают? Угнать можно только свои куки, но все равно так оставлять нельзя.
    Выносим сервлет не только на отдельную машину, но и делаем ей отдельный поддомен highlighter.indexisto.com .

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

    Продолжая ресечить решение от гугла я открыл нашу страницу отдающуюся через прокси в отдельном окне

    И обратил внимание на странную ошибку в консоли.
    CrossPageChannel: Can"t connect, peer window-object not set.
    Стало ясно что все организованно сложнее, чем просто загрузить страницу в iframe со своего домена. Страницы общаются между собой. Соответственно двигаемся в сторону window.postMessage

    Post Message Заставлять внедрять вебмастера в свою страницу наш скрипт который бы обеспечивал выделение элементов страницы мышкой, а потом бы отсылал xPath этих элементов к нам в родительский документ через postMessage было не гуманно. Однако никто не мешает нашему прокси внедрить любые скрипты на загружаемую в iFrame страницу.
    Все необходимые для внедрения скрипты сохраняем в файл, и вставляем их перед закрывающим body :
    final int positionToInsert = responseText.indexOf(""); final InputStream inputStream = getServletContext().getResourceAsStream("/WEB-INF/inject.js"); final StringWriter writer = new StringWriter(); IOUtils.copy(inputStream, writer); final String jsToInsert = writer.toString(); responseText = responseText.substring(0, positionToInsert) + jsToInsert + responseText.substring(positionToInsert, responseText.length());
    для пробы вставляем alert - все работает.JS часть - подсвечиваем дом элемент под мышкой и получаем xpath Окей, переходим собственно к JS который мы вставили на страницу вебмастера.
    Нам необходимо подсвечивать dom элементы над которыми человек водит мышкой. Лучше делать это с помощью shadow так как тогда элемент не будет смещаться, а вся страница прыгать. Вешаем onmouseover на body и смотрим на target события. В этом же обработчике я вычисляю xpath элемента. Вычислять xPath элемента лучше на клик, но никаких тормозов и в такой реализации я не заметил.
    elmFrame.contentWindow.document.body.onmouseover= function(ev){ ev.target.style.boxShadow = "0px 0px 5px red"; curXpath = getXPathFromElement(ev.target); }
    Я не привожу здесь реализацию получения xPath элемента DOM. Существует множество сниппетов того как это сделать. Эти сниппеты можно модифицировать под свои задачи, например вам нужны в xpath только тэги. Или вам нужны id если они есть и классы если нет id - у всех свои требования.

    Вот пример запроксированной главной страницы Хабра с внедренным скриптом:
    http://highlighter.indexisto.com/?md5=6ec7rdHxUfRkrFy55jrJQA==&url=http%3A%2F%2Fhabrahabr.ru&expires=1390468360

    JS часть - обрабатываем клик Клик человека на странице в iframe сразу же «гасится» (перехода по ссылке в iframe не произойдет). А так же мы посылаем в родительское окно строку полученного xPath (мы его сохранили еще на этапе вождения мышкой над элементом)
    document.body.onclick = function(ev){ window.parent.postMessage(curXpath, "*"); ev.preventDefault(); ev.stopPropagation(); } Profit! Вот и все, теперь в нашей админке вебмастер может намного проще быстро получить xpath пути к элементам на своих страницах.

    Добавим еще секьюрности Окей, у нас все заработало, однако есть момент с тем, что наш прокси смотрит в мир совершенно незащищенный. Кто угодно может запроксировать что угодно.

    Ставим перед прокси nginx, он слушает 80 порт, сам прокси убираем на другой порт. Все другие порты кроме 80 закрываем от внешнего мира.

    Теперь сделаем так чтобы прокси работал только через панель администратора. В момент когда вебмастер вводит URL своего сайта мы быстро бегаем на сервер где генерим md5 хэш от текущего TimeStamp + 1 час, самой URL и суперсекретного когда:
    final String md5Me = timeStampExpires + urlEncoded + "SUPERSECRET"; final MessageDigest md = MessageDigest.getInstance("MD5"); md.reset(); md.update(md5Me.getBytes("UTF-8")); String code = Base64.encodeBase64String(md.digest()); code = code.replaceAll("/", "_"); code = code.replaceAll("\\+","-");
    Так же обратите внимание что в коде мы получачаем md5 строку не как привычный hex, а в base64 кодировке, плюс в полученном md5 мы делаем странные замены символов слэша и плюса на подчеркивание и тире.
    Дело в том что ngnix использует base64 Filename Safe Alphabet tools.ietf.org/html/rfc3548#page-6
    А Java дает каноничсекий base64.

    Получив в нашей админке ответ от сервера с секьюрной md5, мы пытаемся загрузить в iframe вот такой url:
    highlighter.indexisto.com/?md5=Dr4u2Yeb3NrBQLgyDAFrHg==&url=http%3A%2F%2Fhabrahabr.ru&expires=1389791582

    Теперь настраиваем модуль nginx HttpSecureLinkModule . Этот модуль сверяет md5 всех параметров которые к нему пришли (в модуле прописан тот же секретный ключ что и в сервлете админки), проверяет не проэкпарйилась ли ссылка и только в этом случае пробрасывает запрос на наш прокси сервлет.

    Теперь никто не может воспользоваться нашим прокси не из админки, а так же не может куда-нибудь вставить запроксированную на наш сервер картинку - она все равно умрет через час.

    That"s all folks! Гугл в своем инструменте marker естественно ушел намного дальше. Для того чтобы четко идентифицировать элемент на странице, нужно пометить один и тот же элемент (например, заголовок статьи) на нескольких однотипных страницах, чтобы можно было точнее построить xpath и отбросить разные id типа «post-2334» которые явно сработают только на одной странице. В нашей админке пока xpath надо поправить руками, чтобы получить приемлимый результат

    Одним из наиболее частых способов заражения компьютера посетителей сайтов является использование уязвимости, связанной с переполнением буферов браузеров пользователей. Рецепт достаточно прост. Злоумышленники внедряют вредоносный код вставкой iframe на страницы сайта и пытаются загрузить на компьютер ничего не подозревающего пользователя вредоносные файлы. Обнаружить подобные вредоносные врезки на ваших сайтах достаточно легко. Стоит лишь обратить внимание на фрагменты кода, в которых используется подключение iframe. Такие вставки могут быть как в HTML, так и в PHP файлах.

    Злоумышленники почти всегда пытаются максимально скрыть от владельцев использование вредоносных ставок, скрывая их визуально для пользователей ресурса и обфусцируя (запутывая) свой код.

    Скрытие iframe вставок от глаз пользователей

    Для маскировки вредоносной вставки хакеры в большинстве случаев применяют один и тот же метод раз за разом - выставляют свойства тега так, чтобы он не отображался на странице, но содержался в ее коде. Чаще всего, выставляется нулевая или однопикселевая ширина и длина: width="1px", height="1px".

    Например, вредоносный код может выглядеть так:

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

    Обфускация

    Это один из наиболее часто встречаемых способов защиты кода в программировании на неструктурированных языках (таких, как, например, PHP). Фактически, все шифрование заключается в самом перепутывании/запутывании кода за счет изменения имен переменных и других элементов. Как результат - распознать признаки вредоносности в запутанном коде достаточно тяжело и возможно лишь по косвенным признакам использования в явном виде специальных JS (JavaScript) функций, используемых как раз для обфускации: unescape , fromCharCode .

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

    В любом случае, если вы столкнулись с подозрительным обфусцированным кодом, нужно действовать с максимальной аккуратность.

    Прочие признаки заражения

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

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

    Альтернативные методы

    Мы рекомендуем вам использовать сервис Вирусдай для удаления вредоносных вставок на даже в тех случаях, когда вы являетесь продвинутым специалистом. Наш сервис не только содержит множество сигнатур, по которым находит вредоносные коды, но и экономит время! К тому же, стоимость использования Вирусдая для чистки будет, вероятно, намного ниже, чем оплата вашего же рабочего времени. Вы сможете обнаружить и удалить не только iframe вставки, но и множество других угроз. Вероятно, вы сможете найти и автоматически удалить угрозу, приведшую к появлению iframe вставок на вашем сайте, такую, как, например, Шелл.

    Команда сервиса Вирусдай.

    Элемент

    Frames

    Что же делает ?

    Как вставить страницу в страницу HTML ? Для этого нужно использовать , который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ .

    Отображение

    Display block.

    Пример кода

    Мощный, но легкий в использовании

    Еще в старые недобрые времена веб-дизайна было много элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент был объявлен устаревшим в HTML5 . Но или «встроенный фрейм » по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.

    Сходства и различия и

    Оба этих элемента позволяют создать отдельный HTML-документ . Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src .

    . . . . . .

    Основное различие между и заключается в том, что обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube :

    Видео явно на HTML странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов ), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.

    Не переделывайте макеты на основе фреймов с помощью iframe

    Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target , чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript . Пожалуйста, не делайте этого.

    Удачное (и ужасное) применение

    Существует несколько допустимых вариантов использования для создания HTML страницы:

    • встраивание стороннего медиа контента;
    • встраивание собственного медиа контента через кроссплатформенный документ;
    • встраивание примеров кода;
    • встраивание сторонних «апплетов » в качестве форм оплаты.

    А вот некоторые ужасные варианты использования :

    • Фотогалерея;
    • форум или чат.

    Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте . Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.

    Атрибуты iframe
    Название атрибута Значение Описание
    sandbox Allow-same-origin
    Allow-top-navigation
    Allow-forms
    Allow-scripts     		Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу.
    scrolling yes no auto Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS.
    Name название Задает имя фрейма.
    Align left right top
    middle bottom     		Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS.
    frameborder yes (или 1)
    no     		Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS.
    longdesc URL Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS.
    marginwidth пиксели Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS.
    src URL Определяет URL-адрес документа для отображения в IFRAME.
    vspace пиксели Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS.
    width пиксели % Определяет ширину фрейма на HTML странице.

    Данная публикация представляет собой перевод статьи « » , подготовленной дружной командой проекта

    Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .

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

    Что это такое и чем отличается Iframe от Frame

    Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.

    Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.

    В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит основное преимущество использования фреймов в Html.

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

    Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.

    Iframe — встроенный фрейм в стандарте Html 5

    Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.

    Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.

    Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент . Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.

    Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег :

    В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты Width и Height , значения которых задаются в пикселах:

    Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.

    Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты Hspace и Vspace , которые позволяют задать отступы от границ фрейма до обтекающего его текста.

    Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же Align , но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.

    Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).

    Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":

    Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.

    Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.

    Как я уже упоминал, наглядным примером использования Iframe является :

    Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.

    Фреймы на основе тегов Frame и Frameset — их структура

    Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset .

    Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):

    Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента Frame . Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.

    Третий элемент, который мы еще с вами не затронули — это Noframes . Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.

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

    Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.

    Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows . Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.

    Создание структуры на основе Frameset и его атрибутов Cols и Rows

    В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.

    Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.

    Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:

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

    В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать . Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.

    Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как звездочка «*» . Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.

    Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:

    Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».

    Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).

    А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:

    Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?

    Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:

    Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:

    В результате мы получим первую колонку Frame шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.

    Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:

    Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".

    И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.

    Указываем путь в атрибуте Src элемента Frame

    Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.

    Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это Src . Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.

    Путь до документа в Src может быть указан в виде . Относительные пути обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.

    Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.

    Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:

    Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.

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

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

    Как открывать документы по ссылке во фрейме

    Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target="_self".

    Но этим возможности Target не ограничиваются. Оказывается можно добавлять в него значение в виде названия фрейма , которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.

    Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью атрибута Name в теге Frame.

    Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target="ktona":

    История появления Joomla и компонента VirtueMart

    Конечно же, с помощью инструмента поиска и замены в проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать специальный тег Base , о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.

    Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target="ktona" и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:

    Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?

    Ну, во-первых, нужно дать имя левому вертикальному фрейму:

    А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target="gor":

    Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.

    Атрибуты тега Frame для настройки внешнего вида окон

    Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с Scrolling . С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.

    Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.

    Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).

    Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:

    Следующий атрибут тега Frame — Noresize — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.

    При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).

    Еще один визуальный атрибут — Frameborder . C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.

    Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.

    Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — Marginwidth и Marginheight , которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):

    Почему нельзя делать сайт на фреймах?

    Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по этой фреймовой структуры невозможно отследить ее состояние .

    У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?

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

    Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.

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

    Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?

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

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

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

    Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и , а следовательно и улучшить , которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.

    Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:

    JOOMLA

    Но все эти ограничения касаются только структур на тегах Frame и Frameset, а встроенные фреймы на тегах Iframe не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.

    Удачи вам! До скорых встреч на страницах блога сайт

    Вам может быть интересно

    Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
    Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
    Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
    Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
    Списки в Html коде - теги UL, OL, LI и DL
    Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
    Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах

    Проверка сайта на вирусы часто не выявляет iframe вставки, которые могут включать ссылки на сомнительные сайты, но новая версия WP плагина AntiVirus укажет их.

    Iframe вставки сами по себе не являются вредоносным кодом, поэтому зачастую не определяются онлайн-сервисами по проверке сайта на вирусы. С помощью Iframe вставок часто загружают файлы, которые могут располагаться на внешнем ресурсе. Например, этот способ может использоваться для загрузки видеоролика на Ваш сайт с You Tube. Но очень часто iframe вставки применяются злоумышленниками для загрузки на сайт жертвы файлов подозрительного содержания.

    Я уже писал, что неоднократно сталкивался с явно зараженными сайтами, но их проверка на ресурсе antivirus-alarm.ru с использованием баз данных ведущих антивирусных разработчиков не выявляла ничего подозрительного. Проверка же на 2ip.ru выдавала наличие подозрительных iframe вставок, но без указания конкретного места в коде, где их можно найти. Так же не указывалось, являются ли эти вставки полезными или вредоносными.

    Но с выходом последней версии WP плагина ситуация изменилась. По заверению разработчика этот плагин теперь показывает iframe вставки. А Вы уже сами в состоянии будете определить вредны они или нет. Зная, как выглядит iframe вставка:

    в случае, если плагин ее обнаружил, по тому, адрес какого ресурса указан в этой вставке, легко определиться к полезной или вредной ее отнести.

    В отличие от антивирусов для компьютеров, которые сами находят и сами удаляют вредоносный код, большинство антивирусов для сайта, такие, как AntiVirus, и только находят подозрительный с их точки зрения код. Решение об его удалении и само удаление проводится пользователем. Причем новичкам, не ориентирующимся в PHP, реально поможет только плагин TAC, предназначенный для проверки темы. Мне известен только один плагин , который не только находит, но и удаляет нехороший код. К сожалению, данный плагин обладает одной неприятной особенностью. Если он не справляется с заражением на сайте, то он блокирует доступ к сайту, не спрашивая но это разрешения.

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

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