Html code as IFRAME source rather than a URL

Question

This standard code for an IFRAME  is there a way to replace the src URL with Just html code  so my problem is simple  I have a page it loads an HTML body from MYSQL I want to present that code in a frame so it renders it self independent of the rest of the page and in the confines of that specific bordering    lt iframe src  http   example com  name  test  height  120  width  600  gt You need a Frames Capable browser to view this content  lt  iframe gt

User · Answer

use html5 s new attribute srcdoc  srcdoc-polyfill  Docs    lt iframe srcdoc   lt html gt  lt body gt Hello   lt b gt world lt  b gt   lt  body gt  lt  html gt   gt  lt  iframe gt    Browser support  - Tested in the following browsers   Microsoft Internet Explorer 6  7  8  9  10  11 Microsoft Edge 13  14 Safari 4  5 0  5 1  6  6 2  7 1  8  9 1  10 Google Chrome 14  15  16  17  18  19  20  21  22  23  24 0 1312 5  beta   25 0 1364 5  dev   55 Opera 11 1  11 5  11 6  12 10  12 11  beta    42 Mozilla FireFox 3 0  3 6  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  beta   50

User · Answer

You can do this with a data URL   This includes the entire document in a single string of HTML   For example  the following HTML    lt html gt  lt body gt foo lt  body gt  lt  html gt    can be encoded as this   data text html charset utf-8  3Chtml 3E 3Cbody 3Efoo 3C body 3E 3C html 3E   and then set as the src attribute of the iframe   Example     Edit  The other alternative is to do this with Javascript   This is almost certainly the technique I d choose   You can t guarantee how long a data URL the browser will accept   The Javascript technique would look something like this   var iframe   document getElementById  foo        iframedoc   iframe contentDocument    iframe contentWindow document   iframedoc body innerHTML    Hello world     Example    Edit 2  December 2017   use the Html5 s srcdoc attribute  just like in Saurabh Chandra Patel s answer  who now should be the accepted answer  If you can detect IE Edge efficiently  a tip is to use srcdoc-polyfill library only for them and the  pure  srcdoc attribute in all non-IE Edge browsers  check caniuse com to be sure     lt iframe srcdoc   lt html gt  lt body gt Hello   lt b gt world lt  b gt   lt  body gt  lt  html gt   gt  lt  iframe gt

User · Answer

I have a page it loads an HTML body from MYSQL I want to present that code in a frame so it renders it self independent of the rest of the page and in the confines of that specific bordering.

An object with a unencoded dataUri might have also fit your need if it was only to load a portion of data text:

The HTML <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

_x000D_

body {display:flex;min-height:25em;}
p {margin:auto;}
object {margin:0 auto;background:lightgray;}

_x000D_

<p>here My uploaded content: </p>
<object data='data:text/html,
  <style>

.table {
  display: table;
  text-align:center;
  width:100%;
  height:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>


<div class="table">
  <header>
    <h1>Title</h1>
    <p>subTitle</p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>'>

</object>

_x000D_

But keeping your Iframe idea, You could also load your HTML inside your iframe tag and set it as the srcdoc value.You should not have to mind about quotes nor turning it into a dataUri but only mind to fire onload once.

The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one.

Both iframe below will render the same, one require extra javascript.

example loading a full document :

_x000D_

body {
  display: flex;
  min-height: 25em;
}

p {
  margin: auto;
}

iframe {
  margin: 0 auto;
  min-height: 100%;
  background:lightgray;
}

_x000D_

<p>here my uploaded contents =>:</p>
  <iframe srcdoc='<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
html, body {
  height: 100%;
  margin:0;
}

body.table {
  display: table;
  text-align:center;
  width:100%;
}

.table > * {
  display: table-row;
}

.table > main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
</style>
</head>

<body class="table">
  <header>
    <h1>title</h1>
    <p>injected via <code>srcdoc</code></p>
  </header>

  <main>
    <p>Collection</p>
    <p>Version</p>
    <p>Id</p>
  </main>

  <footer>
    <p>Edition</p>
  </footer>
</body>
</html>'>

</iframe>

  <iframe onload="this.setAttribute('srcdoc', this.innerHTML);this.setAttribute('onload','')">
    <!-- below html loaded -->
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
      <title>Test</title>
      <style>
        html,
        body {
          height: 100%;
          margin: 0;
          overflow:auto;
        }
        
        body.table {
          display: table;
          text-align: center;
          width: 100%;
        }
        
        .table>* {
          display: table-row;
        }
        
        .table>main {
          display: table-cell;
          height: 100%;
          vertical-align: middle;
        }
      </style>
    </head>

    <body class="table">
      <header>
        <h1>Title</h1>
        <p>Injected from <code>innerHTML</code></p>
      </header>

      <main>
        <p>Collection</p>
        <p>Version</p>
        <p>Id</p>
      </main>

      <footer>
        <p>Edition</p>
      </footer>
    </body>

    </html>
    </iframe>

_x000D_

User · Answer

iframe srcdoc  This attribute contains HTML content  which will override src attribute  If a browser does not support the srcdoc attribute  it will fall back to the URL in the src attribute  Let s understand it with an example  lt iframe      name  quot my iframe quot       srcdoc  quot  lt h1 style  text-align center  color  9600fa  gt Welcome to iframes lt  h1 gt  quot      src  quot https   www birthdaycalculatorbydate com  quot      width  quot 500px quot      height  quot 200px quot   gt  lt  iframe gt   Original content is taken from iframes

User · Answer

According to W3Schools  HTML 5 lets you do this using a new  srcdoc  attribute  but the browser support seems very limited

[html] Html code as IFRAME source rather than a URL

The answer is

Examples related to html

Examples related to iframe

Examples related to frame

Tags