iframe: How to display raw (plain text) html?

Issue

I want to display an HTML string as raw/plain text HTML in an iframe.

For example, display "<b>Hello World</b>" (instead of Hello World).

I've tried to display it like this:

<iframe srcdoc="<pre><b>Hello World</b></pre>"></iframe>

But it didn't work. It displays bold "Hello world" text.

I'm using Nuxt.js.

What am I missing?

Solution

With no iframe

<pre id="code"></pre>

<script>
  document.getElementById('code').textContent = '<b>Hello World</b>';
</script>

With an iframe

<iframe id="codeFrame"></iframe>

<script>
  function writeToIframe(iframe, markup) {
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write('<pre id="code"></pre>');
    iframe.contentWindow.document.getElementById('code').textContent = markup;
    iframe.contentWindow.document.close();
  }

  writeToIframe(document.getElementById('codeFrame'), '<b>Hello World</b>');
</script>

Answered By - theOneWhoKnocks