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.
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 -->
<!-- acceptance.blade.php -->
<iframe id="iframe-673ed9d685862" 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-673ed9d685862" data-uid="673ed9d685876">
</iframe>
<script>
window.addEventListener(
'message',
function(e) {
if (!e.origin.match('ettbattre.helsingborg.se')) {
return;
}
const acceptance = document.querySelector('#acceptance-iframe-673ed9d685862');
const iframe = document.querySelector('#iframe-673ed9d685862');
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="673ed9d6859b0">
Automatic height detection
</h2>
<!-- code.blade.php -->
<div class="c-code" data-uid="673ed9d685a14">
<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>
@endcodeIframe displaying a video from youtube.com
This is a known website. Which means it will use the knownLabels object within the labels array.
<!-- iframe.blade.php -->
<!-- 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-673ed9d685ccc" data-uid="673ed9d685d2f">
<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-673ed9d685d2f" aria-label="info" type="button" data-uid="673ed9d685d9f">
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed9d685e99">
</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="673ed9d685efc">
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-inherit" aria-hidden="false" material-symbol="play_circle" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed9d685f40">
</span>
</span>
</span> </button>
<!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__modal-673ed9d685d2f" id="modal-673ed9d685d2f" data-uid="673ed9d685fbf">
<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-673ed9d685d2f" data-uid="673ed9d686011">
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="673ed9d68605b">
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed9d68609b">
</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-673ed9d685ccc" 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-673ed9d685ccc" data-uid="673ed9d685cd7">
</iframe>
<script>
window.addEventListener(
'message',
function(e) {
if (!e.origin.match('www.youtube.com')) {
return;
}
const acceptance = document.querySelector('#acceptance-iframe-673ed9d685ccc');
const iframe = document.querySelector('#iframe-673ed9d685ccc');
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'
]
],
])
@endiframeBlade 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. |