CODEWITHSUNDEEP
javascripthtmliframe
Aloso
Aloso

Reputation: 5397

Use an iframe with editable website

I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.

Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?

This is how it should look (just an iframe).

<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>

<div id="body"></div>

In fact, JSFiddle does the same, so there must be a way. Ideas?

Upvotes: 0

Views: 697

Answers (1)

Tieson T.
Tieson T.

Reputation: 21221

You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:

Editor document:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit iframe example</title>
        <style>
            .editors, .preview { float: left; display: block; }
            .editors { width: 500px; margin-right: 25px; }
                .editors textarea { width: 100%; height: 300px; }
            .preview { width: 800px; }
                .preview iframe { width: 100%; height: 800px; }
        </style>
    </head>
    <body>
        <div class="editors">
            <p>
                <label>CSS</label>
            </p>
            <p>
                <textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
            </p>
            <p>
                <label>HTML</label>
            </p>
            <p>
                <textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
            </p>
        </div>

        <div class="preview">
            <iframe id="preview" src="preview.html"></iframe>
        </div>

        <script>
            function updatePreviewHTML(elem) {

                var frame = document.getElementById('preview');
                var content = elem.value;

                frame.contentWindow.document.body.innerHTML = content;  
            }

            function updatePreviewCSS(elem) {

                var frame = document.getElementById('preview');
                var content = elem.value;

                frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;  
            }
        </script>
    </body>
</html>

The "preview" document:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Preview iframe example</title>
        <style></style>
    </head>
    <body>
    </body>
</html>

I've only tried this locally, on Firefox 31, so caveat emptor.

Upvotes: 1

Related Questions