HTML iframes

HTML/HTML iframes

An HTML iframe tags embed content coming from other origins (other sites) into our web page. Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not interfere with the parent page, and vice versa. JavaScript and CSS do not "leak" to/from iframes. Many sites use an iframe to perform various things.  The HTML <iframe> tag is used to specify an inline frame. Use border: none; to remove the border around the iframe.

Syntax:

<iframe src="url" title="description"></iframe>

If you can load an absolute URL

<iframe src="tutorialsprog.com"></iframe>

If you can set a set of width and height parameters (or set them using CSS) otherwise the iframe will use the defaults, a 300x150 pixels box:

<iframe src="iframe.html" height="200" width="300" title="iframe"></iframe>

Let’s see the iframe attribute and its description within the example

Sandbox:  allows us to limit the operations allowed in the iframes. We can select what to allow by adding options in the sandbox attribute. You can allow multiple ones by adding a space in between. Here's an incomplete list of the options you can use:

• allow-forms used to allow submission
• forms allow-modals used to allow open modals windows, including calling alert () in JavaScript.
• allow-orientation-lock used to allow locking the screen orientation
• allow-popups allow popups using window. open () and target="_blank" links.
• allow-same-origin used to treat the resource being loaded as the same origin.
• allow-scripts let the loaded iframe run scripts (but not create popups).
• allow-top-navigation gives access to the iframe to the top-level browsing context.

Example:

<iframe src="iframe.html" sandbox=""></iframe>

Srcdoc: The srcdoc attribute lets you specify some inline HTML to show. It's an alternative to src.

Example:

<iframe srcdoc="<p>TutorialsProg</p>"></iframe>