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.


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


If you can load an absolute URL

<iframe src=""></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.


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

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


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


Leave a comment
No Cmomments yet