Question

我想创建一个可以编写和预览网站的网站。问题是我想在iframe中预览它，因为网站不受iframe周围的HTML代码的影响。

有没有办法在iframe代码中显示一个网页，其中字符串为源而不是网址？

This应该是什么样子（只是一个iframe）。

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

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

事实上，JSFiddle也是这样，所以必须有办法。想法？

Answer 1

您可以使用src修改contentWindow.document属性指定的文档内容。因此，假设您有一个<textarea>带有要预览的标记，您可以执行以下操作：

编辑文档：

<!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>

＆＃34;预览＆＃34;文件：

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

我只是在Firefox 31上本地试过这个，所以需要注意。

将iframe与可编辑网站一起使用

1 个答案: