Работа с < iframe >.

by · Июль 9, 2014



Теория:
Что такое < iframe>< /iframe>? Это HTML тег, который создаёт, так называемый «плавающий фрейм». Другими словами, тег создаёт контейнер, расположенный в произвольном месте страницы, для загрузки законченного HTML-документа (например содержимое страницы стороннего сайта).

Пример:
[crayon lang=»html» font-size=»12″ ]




Тег IFRAME





[/crayon]
Атрибуты:

align: Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
frameborder: Устанавливает, отображать границу вокруг фрейма или нет.
height: Высота фрейма.
hspace: Горизонтальный отступ от фрейма до окружающего контента.
marginheight: Отступ сверху и снизу от содержания до границы фрейма.
marginwidth: Отступ слева и справа от содержания до границы фрейма.
name: Имя фрейма.
scrolling: Способ отображения полосы прокрутки во фрейме.
src: Путь к файлу, содержимое которого будет загружаться во фрейм.
vspace: Вертикальный отступ от фрейма до окружающего контента.
width : Ширина фрейма.

Использование:

Использование < iframe>< /iframe> для отображения контента сторонней страницы, не вызывает затруднения. Вставляем в нужное место тег, прописываем размеры, адрес страницы и всё готово (см. пример выше).
Более продвинутое использование этого тега, это создание диалоговых окон. Вроде бы тоже не чего сложного, создаём div, вставляем в него наш < iframe>< /iframe> и всё красиво, но возникают вопросы:
  1. доступ к DOM родителя из iframe (диалогового окна);
  2. доступ к DOM ifarame из родителя;
  3. отслеживание родителем события документа в < iframe>< /iframe>

Пример использования iframe как диалогового окна:
[crayon lang=»javascript» font-size=»12″ ]

function getiFrame(){

var div=window.document.createElement(«div»);
//создаём контейнер фрейма елемент div

$jQuery(div).attr(«id»,»someId»);
//добавляем нашему диву идентификатор id

$jQuery(div).css(«display»,»none»);
//скрываем div

$jQuery(div).html(««);
//создаём сам iframe

$jQuery(«body»).append(div);
// вставляем его в наш контейнер

jQuery(«#someId»)
.dialog({modal: true ,width: 800,height:600,title:»Управление файлами»});
//создаем диалоговое окно с помощью дополнения jQueryUI
}

[/crayon]

пример
Вызвать функцию родителя из iframe (диалогового окна):

[crayon lang=»javascript» font-size=»12″ ]

top.ParentFunction();

[/crayon]
Вызвать функцию iframe из родителя
[crayon lang=»javascript» font-size=»12″ ]

document.getElementById(«frameId»).contentWindow.fromParent();
//frameId-id тега