The iframe srcdoc Attribute

6th December 2020 - 6 minutes read time

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe. I did think about creating using an API to send back each page on request but I thought that this might just overcomplicate the program.

After a little bit of research I came across the srcdoc attribute of the iframe, which solved the problem quite neatly.

The iframe is normally used with a src attribute, which points to some external page. The following example will render the page at example.com within the page.

<iframe src="https://www.example.com/"></iframe>

Alternatively, it is possible to use the srcdoc attribute to directly embed HTML into the iframe as an inline page. The following example will render an iframe containing some HTML.

<iframe srcdoc="<p>Some HTML</p>"></iframe>

This can be used to maximum effect by just using the iframe and the srcdoc attribute to render an entire web page. This is an example of this in use with a page that contains some styles to produce a simple layout.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <iframe srcdoc='<!doctype html>
  8. <html lang="en">
  9. <head>
  10. <meta charset="utf-8">
  11. </head>
  12. <style type="text/css">
  13. *{font-family:Verdana, Trebuchet, Lucida, Arial;padding:0;margin:0;}
  14. div.sitemast {
  15. font-size:large;
  16. height:4rem;
  17. }
  18. div.menu{
  19. float:left;
  20. width: 25%;
  21. }
  22. div.menu ul{
  23. list-style:none;
  24. background:cyan;
  25. }
  26. div.menu li a{
  27. padding-left:0.5rem;
  28. }
  29. div.menu li li a{
  30. padding-left:1rem;
  31. }
  32. div.content{
  33. float:right;
  34. width: 75%;
  35. background:yellow;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="sitemast"><h1>Sitemast</h1></div>
  41. <div class="menu"><ul><li><a href="\">Menu</a></li><li><a href="\">Menu</a><ul><li><a href="\">Sub Menu</a></li><li><a href="\">Sub Menu</a></li></li></ul></ul></div>
  42. <div class="content">
  43. <h2>Heading</h2>
  44. <p>Lorem ipsum dolor sit amet consectetuer tincidunt velit Donec orci vitae. Interdum quam lacinia augue quis sagittis sem ut tellus Curabitur at. Aliquam orci montes eu dis lorem penatibus hendrerit semper quis rhoncus. Ut sed felis elit Sed porttitor mauris wisi urna adipiscing quam. At sit augue congue volutpat et Phasellus.</p>
  45. </div>
  46. </body>
  47. </html>'></iframe>
  48. </body>
  49. </html>

Note that I used single quotes for the srcdoc attribute. This helps render the page correctly as all of the double quotes would otherwise need to be escaped.

This works, but unfortunately the web page is rendered within the default size of the iframe, which is about 150px high and 300px wide. The rendered page is therefore squashed into the iframe boundaries. By adding some default styles to the page we can alter this and change not only the size but also the scale of the rendered page so that it fits within the iframe as it would in a full size browser window.

The following styles will increase the height and width of the iframe and reduce the scale of the contents of the iframe in all browsers.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <style type="text/css">
  7. iframe {
  8. -ms-transform:scale(0.50);
  9. -moz-transform:scale(0.50);
  10. -o-transform: scale(0.50);
  11. -webkit-transform: scale(0.50);
  12. transform:scale(0.50);
  13. height: 500px;
  14. width: 1000px;
  15. }
  16. </style>
  17. <body>
  18. <iframe srcdoc='<!doctype html>
  19. <html lang="en">
  20. <head>
  21. <meta charset="utf-8">
  22. </head>
  23. <style type="text/css">
  24. *{font-family:Verdana, Trebuchet, Lucida, Arial;padding:0;margin:0;}
  25. div.sitemast {
  26. font-size:large;
  27. height:4rem;
  28. }
  29. div.menu{
  30. float:left;
  31. width: 25%;
  32. }
  33. div.menu ul{
  34. list-style:none;
  35. background:cyan;
  36. }
  37. div.menu li a{
  38. padding-left:0.5rem;
  39. }
  40. div.menu li li a{
  41. padding-left:1rem;
  42. }
  43. div.content{
  44. float:right;
  45. width: 75%;
  46. background:yellow;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div class="sitemast"><h1>Sitemast</h1></div>
  52. <div class="menu"><ul><li><a href="\">Menu</a></li><li><a href="\">Menu</a><ul><li><a href="\">Sub Menu</a></li><li><a href="\">Sub Menu</a></li></li></ul></ul></div>
  53. <div class="content">
  54. <h2>Heading</h2>
  55. <p>Lorem ipsum dolor sit amet consectetuer tincidunt velit Donec orci vitae. Interdum quam lacinia augue quis sagittis sem ut tellus Curabitur at. Aliquam orci montes eu dis lorem penatibus hendrerit semper quis rhoncus. Ut sed felis elit Sed porttitor mauris wisi urna adipiscing quam. At sit augue congue volutpat et Phasellus.</p>
  56. </div>
  57. </body>
  58. </html>'></iframe>
  59. </body>
  60. </html>

This produces the following output with the actual size of the page being reduced in size by 50%.

Rendering of a iframe

This gave me a handy way of displaying multiple iframes onto the same page and also allowing those inline pages to be scaled down so that they could be shown all at once.

I should note for completeness that this can also be done using the src attribute. To do this the attribute must start with the text "data:text/html,", which indices to the browser that the reset of the string should be rendered as HTML.

<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

I have found this slightly more problematic to deal with when rendering pages inline, but it is possible. This also might be the best option if you are wanting to use Internet Explorer as that browser does not support the srcdoc attribute at all.

Comments

Permalink

Thanks for this, it was very helpful in me getting a prototype working.

Mandy (Thu, 07/01/2021 - 18:16)

Add new comment

The content of this field is kept private and will not be shown publicly.