Documentation

Page operation in iframe

If a common page is opened in the slider's iframe, this page will be displayed jointly with the general design (menu, header, footer). Component output must be adapted for this mode. When opening a page, the slider always adds IFRAME=Y parameter to the URL address. This parameter shows that the page has opened in the iframe and the final layout can be changed.

In the simplified form, adaptaion for slider looks as follows:

<?

if (isset($_REQUEST["IFRAME"]) && $_REQUEST["IFRAME"] === "Y")
{
	$APPLICATION->RestartBuffer(); //reset all output
	?>
	<!DOCTYPE html>
	<html>
	<head>
		<?$APPLICATION->ShowHead(); ?>
	</head>
	<body>
		<?
			//Component content
		?> 
	</body>
	</html><?
}
else
{
	//Component content
}
?>

For the code not to be duplicated, its preferable to use wrapper component.

//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 - complex component page
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
	);
}

Specify minimal with (min-width) for component container. Horizontal scrolling will appear in the slider in small resolutions. This will prevent mutual "overlap" of elements of design.

Links inside iframe are processed by the same BX.SidePanel.Instance.bindAnchors rules, as for the the parent page. If rules didn't match when clicking on the link, the forwarding will be done via usual manner - the page will load in the iframe jointly with the site template design. For such links, either the target="_top" attribute can be specified (the link will open in the parent window), or IFRAME=Y parameter can be added for opening the page, adapted for the slider.

$APPLICATION->ShowHead() will connect the site template styles in the iframe (template_styles.css) as well as component styles. Site template styles (as a rule, it is CSS-selector - body {}) can affect appearance of contents.

Names of CSS-classes for additional design elements (header, sidebar) must be unique and do not overlap with names of site template CSS-classes.

Slider can be accessed inside the Iframe in the same way as in the parent page via BX.SidePanel.Instance. This approach requires connecting CJSCore::Init("sidepanel") slider on the iframe page.

When page connects /bitrix/modules/main/include/prolog_before.php instead of /bitrix/header.php, you need to add $APPLICATION->ShowHeadStrings(); in addition to CJSCore::Init("sidepanel");.



© «Bitrix24», 2001-2024
Up