{"id":44479,"date":"2019-04-03T03:01:33","date_gmt":"2019-04-02T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44479"},"modified":"2019-04-02T19:55:38","modified_gmt":"2019-04-02T09:55:38","slug":"html-iframe-srcdoc-attribute-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-iframe-srcdoc-attribute-primer-tutorial\/","title":{"rendered":"HTML Iframe Srcdoc Attribute Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Iframe Srcdoc Attribute Primer Tutorial<\/p><\/div>\n

The HTML iframe element is a great element allowing inline new webpage content. This is controlled, traditionally, via the attribute (and thanks to W3Schools<\/a> for the heads up here) …<\/p>\n\n\n\n
Attribute<\/th>\nValue<\/th>\nDescription<\/th>\n<\/tr>\n
src<\/td>\nURL<\/td>\nSpecifies the address of the document to embed in the <iframe><\/td>\n<\/tr>\n<\/table>\n

… but, as of HTML5, a new HTML iframe attribute was introduced as below …<\/p>\n\n\n\n
Attribute<\/th>\nValue<\/th>\nDescription<\/th>\n<\/tr>\n
srcdoc<\/td>\nHTML code<\/td>\nSpecifies the HTML content of the page to show in the <iframe><\/td>\n<\/tr>\n<\/table>\n

… featuring functionality I’ve often wanted over a long period of time.<\/p>\n

Today we create a “proof of concept” web application which puts this HTML iframe “srcdoc” attribute through its paces by overlaying, using our (2 out of 3, minus “opacity”) usual “overlay suspects” …<\/p>\n

    \n
  • position:absolute<\/a> property<\/li>\n
  • z-index<\/a><\/li>\n<\/ul>\n

    … to “slap” entire HTML iframe element contents over the top of existent content, specifying that HTML content via this “srcdoc” attribute.<\/p>\n

    You can try this for yourself in a new window<\/a> with this, or see iframe_srcdoc.html<\/a> in action, in a blog posting HTML iframe, below …<\/p>\n