Javascript - Динамическое изменение размера iframe

1. Главная
2. База знаний
3. Javascript - Динамическое изменение размера iframe

Приветствую всех. Хочу показать вам javascript функцию resizeFrame();, которая поможет динамически изменять размеры iframe снаружи и изнутри.

Предположим, у вас есть страница сайта (условно назовем ее "front"), на которой есть iframe окно (условно назовем его "window") с идентификатором #target размерами 100x100 пикселей, ссылающееся на другую страницу сайта (условно назовем ее "back").

Чтобы по нажатию на кнопку на странице front изменить размер window по размеру его содержимого (страница back), достаточно добавить кнопке атрибут onclick="resizeFrame('target');".

Чтобы по нажатию на кнопку на странице back изменить размер window по размеру его содержимого (страница back), достаточно добавить кнопке атрибут onclick="resizeFrame();".

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

Демонстрация работы данной функции доступна по этой ссылке.

//
function resizeFrame(target)
{
	if(typeof(target) != 'undefined')
	{
		target = document.getElementById(target);
		
		if(target)
		{
			h = target.contentWindow.document.body.scrollHeight;
			w = target.contentWindow.document.body.scrollWidth;

			target.style.height = (h) + 'px';
			target.style.width = (w) + 'px';
		}
	}
	else
	{
		target = window.frameElement;
	
		if(target)
		{
			h = document.documentElement.scrollHeight;
			w = document.documentElement.scrollWidth;

			target.style.height = (h) + 'px';
			target.style.width = (w) + 'px';
		}
	}
}
//