Работа страницы в iframe'е

Если в iframe'е слайдера открыть обычную страницу сайта, то она покажется вместе с общим дизайном (меню, шапка, подвал). Для этого режима необходимо адаптировать вывод компонента. При открытии страницы слайдер всегда добавляет в адрес параметр IFRAME=Y. По этому параметру можно понять, что страница открылась в iframe'е и изменить итоговую верстку.

В упрощенном виде адаптация под слайдер выглядит так:

<?

if (isset($_REQUEST["IFRAME"]) && $_REQUEST["IFRAME"] === "Y")
{
	$APPLICATION->RestartBuffer(); //сбрасываем весь вывод
	?>
	<!DOCTYPE html>
	<html>
	<head>
		<?$APPLICATION->ShowHead(); ?>
	</head>
	<body>
		<?
			//Контент компонента
		?> 
	</body>
	</html><?
}
else
{
	//Контент компонента
}
?>

Чтобы не дублировать код, желательно использовать компонент-обертку.

//class.php
<?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)
{
	die();
}

class SliderWrapperComponent extends \CBitrixComponent
{
	public function executeComponent()
	{
		/** @var CMain $APPLICATION */
		global $APPLICATION;
		$APPLICATION->RestartBuffer();

		if (!isset($this->arParams['COMPONENT_PARAMS']) || !is_array($this->arParams['COMPONENT_PARAMS']))
		{
			$this->arParams['COMPONENT_PARAMS'] = array();
		}
		$this->arParams['COMPONENT_PARAMS']['IFRAME'] = true;

		$this->includeComponentTemplate();

		require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_after.php');
		exit;
	}
}

//template.php
<?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) 
{
	die();
}

CJSCore::Init("sidepanel");
?>
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		// Prevent loading page without header and footer
		if(window == window.top)
		{
			window.location = "<?=CUtil::JSEscape($APPLICATION->GetCurPageParam('', array('IFRAME'))); ?>";
		}
	</script>
	<?$APPLICATION->ShowHead();?>
</head>
<body class="disk-slider-body">
	
	<div class="disk-slider-title"><? $APPLICATION->ShowTitle(); ?></div>

	<div class="disk-slider-workarea">
		<div class="disk-slider-sidebar"><? $APPLICATION->ShowViewContent("sidebar"); ?></div>
		<div class="disk-slider-content">
			<?
			$APPLICATION->IncludeComponent(
				$arParams['COMPONENT_NAME'],
				$arParams['COMPONENT_TEMPLATE_NAME'],
				$arParams['COMPONENT_PARAMS']
			);
			?>
		</div>
	</div>
</body>
</html>
<?

//page.php - страница комплексного компонента
if (isset($_REQUEST['IFRAME']) && $_REQUEST['IFRAME'] == 'Y')
{
	$APPLICATION->IncludeComponent(
		'mycompany:slider.wrapper',
		'',
		array(
			'COMPONENT_NAME' => 'mycompany:mycomponent',
			'COMPONENT_TEMPLATE_NAME' => '',
			'COMPONENT_PARAMS' => $componentParameters,
		)
	);
}
else
{
	$APPLICATION->IncludeComponent(
		'mycompany:mycomponent',
		'',
		$componentParameters
	);
}

Установите контейнеру компонента минимальную ширину (min-width). На малых разрешениях в слайдере появится горизонтальный скроллинг. Это предотвратит "наезд" элементов дизайна друг на друга.

Ссылки внутри iframe'а обрабатываются по тем же правилам BX.SidePanel.Instance.bindAnchors, что и на родительской странице. Если по нажатию ссылки правила не совпали, переход будет осуществлен обычным образом - в iframe загрузится страница вместе с дизайном шаблона сайта. Для подобных ссылок можно либо указать атрибут target="_top" (ссылка откроется в родительском окне), либо добавить параметр IFRAME=Y для открытия страницы, адаптированной под слайдер.

$APPLICATION->ShowHead() подключит в iframe'е стили шаблона сайта (template_styles.css) и стили компонента. Стили шаблона сайта (как правило, это CSS-селектор body {}) могут повлиять на внешний вид содержимого.

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

Внутри iframe'а к слайдеру можно обращаться так же как и в родительской странице через BX.SidePanel.Instance. Этот подход требует на странице iframe'а подключить слайдер CJSCore::Init("sidepanel").

Если на странице подключается не /bitrix/header.php, а /bitrix/modules/main/include/prolog_before.php, то помимо CJSCore::Init("sidepanel"); нужно также добавить $APPLICATION->ShowHeadStrings();.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

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

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Наверх