iFrame
Component
iFrame
component is a nested browsing context, allowing one to embed another
web page into the current one. This is widely used by may service providers
to offer their third party services without needing heavy backend integrations.
Bissetii styles iFrame
seemlessly.
This component is available starting from v1.12.1
.
Sass Styling Parts
The Sass styling script responsible for iFrame is located at:
assets/css/bissetii/modules/core/_IFrame.scss
Javascript Parts
This component does not depend on any Javascript.
HTML Parts
Bissetii uses the standard <iframe>
or <amp-iframe>
to render this
component. Depending on output types, the code structure varies accordingly.
Vanilla HTML
For Vanilla HTML, the code pattern is as follow:
|
|
- Line 1 -
<iframe>
tag with the web pageURL
intosrc
. - Line 2 - for security reason,
sandbox=
property should be implemented in a compulsory manner. - Line 3 - specifies the width of the
<iframe>
. Default is100%
. - Line 4 - specifies the height of the
<iframe>
. - Line 5 - specifies the title of the
<iframe>
for accessibility compatibility. - Line 6 - specifies the fallback content if the
<iframe>
fails.
AMP HTML
For AMP HTML, you need to import the AMP extension for amp-iframe
as
instructed by the
AMP developers. One key
requirement for using amp-frame
is that the original page length must attain
a minimum of 600px before using one. This can work against short pages.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
As the code pattern is as follow:
|
|
- Line 1 -
<amp-iframe>
tag with the web pageURL
intosrc
. - Line 2 - for security reason,
sandbox=
property should be implemented in a compulsory manner. - Line 3 - specifies the width of the
<amp-iframe>
. - Line 4 - specifies the height of the
<amp-iframe>
. - Line 5 - specifies the AMP layout of the
<amp-iframe>
. - Line 6 - specifies the placeholder content if the
<amp-iframe>
is not loaded.
Available Styles
There are a bunch of iFrame
component styling from Bissetii.
Default
The default rendering is as follow:
<iframe src="https://www.zoralab.com/en-us/"
sandbox="allow-scripts allow-same-origin"
width="300"
height="300"
class="my-class"
title="Example iframe Data File">
<p><strong>Example of Using Markdown</strong></p>
<p>This is markdown text.</p>
</iframe>
Hidden
Another style is to hide the iFrame component completely using the hidden
class tag. This will hide the iFrame but leaving it functioning under the hood.
The HTML codes for respective outputs are:
|
|