Iframe

The iframe HTML element is used for embedding another HTML page into the current one.

Iframe displaying w3schools.com

This is a unknown website. Which means it will use the unknownLabels object within the labels array.


Warning: The parameter "height" in the acceptance component should be of type "boolean|string" but was recieved as type "integer". in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 228

Automatic height detection

You may enable the iframe component to automatically adapt the height to the iframe content by embedding the following script into the framed content.

<!-- iframe.blade.php -->
    <br />
<b>Warning</b>:  The parameter <b>"height"</b> in the <b>acceptance</b> component should be of type <b>"boolean|string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<!-- acceptance.blade.php -->
<iframe id="iframe-6606da3a337e8" class="c-iframe" allowfullscreen="1" width="100%" height="600" frameborder="0" loading="lazy" src="https://ettbattre.helsingborg.se/" title="Ett bättre Helsingborg Application" aria-label="Ett bättre Helsingborg Application" id="iframe-6606da3a337e8" data-uid="6606da3a337fa">
    </iframe>
    <script>
        window.addEventListener(
            'message',
            function(e) {
                if (!e.origin.match('ettbattre.helsingborg.se')) {
                    return;
                }
                const acceptance    = document.querySelector('#acceptance-iframe-6606da3a337e8');
                const iframe        = document.querySelector('#iframe-6606da3a337e8');
                const message       = e.data;

                if(acceptance && message && message.height) {
                    acceptance.style.height = message.height + 'px';
                }
                if(iframe && message && message.height) {
                    iframe.height           = message.height;
                }
            },
            false
        );
    </script> 

    <!-- typography.blade.php   original: h3 -->
<h2 class="c-typography c-typography__variant--h3" data-uid="6606da3a3396e">
    Automatic height detection
</h2>
    <!-- code.blade.php -->
<div class="c-code" data-uid="6606da3a339bd">
            <p class="c-code__description">You may enable the iframe component to automatically adapt the height to the iframe content by embedding the following script into the framed content.</p>
    
    <pre class="c-code__pre"><code class="c-code__output language-js" data-type="js"><script>
	if(window.location !== window.parent.location) {
		document.querySelector("html, body").style.height = "auto";
		const sendMessageToParent = () => {
			window.parent.postMessage({
				height: document.body.clientHeight
			}, '*');
		};sendMessageToParent();
		new ResizeObserver(() => {
			sendMessageToParent();
		}).observe(document.body);
	}
</script></code></pre>
</div>
@iframe([
  'src' => 'https://ettbattre.helsingborg.se/',
	'title' => 'Ett bättre Helsingborg Application',
	'width' => '100%',
	'height' => 600,
	'labels' => [
		'knownLabels' => [
			'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		],
		'unknownLabels' => [
			'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		]
	],
])
@endiframe

@typography([
	'variant' => "h3",
	'element' => "h3",
	'u-margin__bottom' => 0
])
	Automatic height detection
@endtypography

@code(['language' => 'js', 'content' => "You may enable the iframe component to automatically adapt the height to the iframe content by embedding the following script into the framed content."])
<script>
	if(window.location !== window.parent.location) {
		document.querySelector("html, body").style.height = "auto";
		const sendMessageToParent = () => {
			window.parent.postMessage({
				height: document.body.clientHeight
			}, '*');
		};sendMessageToParent();
		new ResizeObserver(() => {
			sendMessageToParent();
		}).observe(document.body);
	}
</script>
@endcode

Iframe displaying a video from youtube.com

This is a known website. Which means it will use the knownLabels object within the labels array.


Warning: The parameter "height" in the acceptance component should be of type "boolean|string" but was recieved as type "integer". in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 228
This is the information that is shown describing what accepting means.
<!-- iframe.blade.php -->
    <br />
<b>Warning</b>:  The parameter <b>"height"</b> in the <b>acceptance</b> component should be of type <b>"boolean|string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<!-- acceptance.blade.php -->
<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--video js-suppressed-content--video" data-src="["https://www.youtube.com/watch?v=NpEaa2P7qZI"]" style="height:600px" id="acceptance-iframe-6606da3a33a24" data-uid="6606da3a33aa3">
    <div class="c-acceptance__modal js-suppressed-content-prompt">
        <div class="c-acceptance__modal-description js-suppressed-content-description">
                                <button class="c-button c-acceptance__modal-info c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-open="modal-6606da3a33aa3" aria-label="info" type="button" data-uid="6606da3a33b10">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="info" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6606da3a33b73">
                info
    </span>
            </span>
        
        
    </span> </button>
                    <button class="c-button c-acceptance__modal-icon-play c-button__basic c-button__basic--default c-button--xxxl c-button--icon-only" target="_top" js-suppressed-content-accept="" aria-label="play_circle" type="button" data-uid="6606da3a33bcd">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-circle c-icon--material c-icon--material-play_circle material-symbols-outlined material-symbols-outlined--filled c-icon--size-inherit" aria-hidden="true" material-symbol="play_circle" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6606da3a33c06">
                play_circle
    </span>
            </span>
        
        
    </span> </button>
                    <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__modal-6606da3a33aa3" id="modal-6606da3a33aa3" data-uid="6606da3a33c75">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-6606da3a33aa3" data-uid="6606da3a33caf">
    This is the title of a known website (YouTube). You can find their policy here: https://policies.google.com/privacy.
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="6606da3a33ce5">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="close" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6606da3a33d1a">
                close
    </span>
            </span>
        
        
    </span> </button>    </div>

    <section class="c-modal__content" tabindex="2">

        
        
        This is the information that is shown describing what accepting means.

        
            </section>

    
    </dialog>
                    </div>
    </div>
	
    <!-- Display after accept -->
    <div class="c-acceptance__content">
        <template>
            <iframe id="iframe-6606da3a33a24" class="c-iframe" allowfullscreen="1" width="800" height="600" frameborder="0" loading="lazy" src="https://www.youtube.com/watch?v=NpEaa2P7qZI" title="A video from youtube" aria-label="A video from youtube" id="iframe-6606da3a33a24" data-uid="6606da3a33a2c">
    </iframe>
    <script>
        window.addEventListener(
            'message',
            function(e) {
                if (!e.origin.match('www.youtube.com')) {
                    return;
                }
                const acceptance    = document.querySelector('#acceptance-iframe-6606da3a33a24');
                const iframe        = document.querySelector('#iframe-6606da3a33a24');
                const message       = e.data;

                if(acceptance && message && message.height) {
                    acceptance.style.height = message.height + 'px';
                }
                if(iframe && message && message.height) {
                    iframe.height           = message.height;
                }
            },
            false
        );
    </script>
        </template>
    </div>
</div>
@iframe([
  'src' => 'https://www.youtube.com/watch?v=NpEaa2P7qZI',
	'title' => 'A video from youtube',
	'width' => 800,
	'height' => 600,
	'labels' => [
		'knownLabels' => [
			'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		],
		'unknownLabels' => [
			'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
			'info' => 'This is the information that is shown describing what accepting means.',
			'button' => 'accept'
		]
	],
])
@endiframe

Blade component parameters

Key Default value Type Available values Description
src about:blank string - Source URL
loading lazy string - Loading type (for defering)
width 100% string - Width in number or % (ex: 100% or 400)
height 400 string - Height in number
frameborder 0 string - Default border of the iframe (0 for none, 1 for border)
labels string - JSON string of an object containing button, title and info labels
modifier string - Modifier variable ex. video
title External content string - -
poster false boolean - -
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Iframe/iframe.json