Javascript: работаем с iframe

В разное время приходилось решать некоторые задачи при работе с iframe на странице с помощью javascript. Наиболее интересными на мой взгляд остаются загрузка рекламных объявлений при помощи динамически созданного фрейма и использование скрытого iframe на странице для асинхронной загрузки файлов на сервер. Решил собрать часть из найденных примеров вместе.

Создаем новый iframe динамически при помощи javascript. В случае, если есть необходимость в создании фреймов «на лету», например, для предварительного просмотра документов вложенный фрейм удобно создавать динамически.

var el = document.createElement("iframe");
document.body.appendChild(el);
el.id = 'iframe';
el.src = 'http://jurius.name';

Запрещаем просматривать страницу в iframe. Полезно, если вы не хотите, чтобы чужие сайты использовали ваш контент как свой таким нехитрым способом.

if (window!= top)
	top.location.href=location.href

Обновляем содержимое iframe. Для перезагрузки данных в iframe достаточно всего лишь обновить его атрибут src.

function refreshIFrame(iframe_id) {
		var code = document.getElementById(iframe_id);
		code.src = code.src;
	}

Копируем содержимое iframe. Для получения содержимого вложенного фрейма можно воспользоваться следующей функцией.

function getIframeContent(iFrame){
    var linkedFrame = document.getElementById(iFrame);
    var content = linkedFrame.contentWindow.document.body.innerHTML;
    return content;
}

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

parent.yourfunction();

Подгоняем размеры iframe под размер содержимого документа. Для того, чтобы вложенный фрейм на странице выглядел максимально аккуратно, стоит переопределить его размеры уже после загрузки документа. Изменения касаются в 99% случаев только высоты фрейма, поскольку ширина влияет на весь контент документа в целом и должна зависеть от вызываемой в iframe страницы.

function adjustHeight(frameId)
{
  var height =
  	document.getElementById(frameId).contentWindow.
  		document.body.scrollHeight;
  document.getElementById(frameId).height=
      the_height;
}

Эту функцию нужно добавить в вызов по событию onload самого iframe в родительском документе.