Question

我正在制作一个简单的代码编辑器，用于在线和离线编写HTML / CSS / JS文件。到目前为止，一切都很顺利，但我试图弄清楚如何准确预览输入编辑器，doctype和所有内容的完整HTML文档。到目前为止，对于编辑器，您可以使用＆＃34;在新标签页中打开＆＃34;打开您在新窗口中键入的文档。

但是，我让它按照我希望的方式工作的唯一方法是使用base64编码的HTML文件，这样我就可以将一个整体文档输出到窗口，doctype和所有文件。

如果我使用说previewWinRef.document.write(editor.value)，那就不行了。在尝试之后，它所做的就是附加到当前文档中。

如何清除整个预览窗口的内容并将编辑器textarea的整个值写入预览窗口而不使用base64编码？

[编辑]：以下是代码中发生的事情：

editor.addEventListener('keydown',function(event){
            setTimeout(function(){
                if(previewWinRef){
                    previewWinRef.location = "data:text/html;base64,"+Base64.encode(editor.value);
                }
            },100);
        });

基本上每次按下按键我都会刷新结果，只有在打开预览窗口时才转到File-＆gt; Open In New Tab。出于某种原因，我似乎无法访问预览窗口的文档，即使编辑器窗口创建它并且它只是一个数据URL？ Window {} Screenshot

Here is the editor.

Answer 1

试试这个：

var win = window.open("about:blank", "title");
win.document.getElementsByTagName("html")[0].innerHTML = document.body.getElementsByTagName("textarea")[0].value;

Answer 2

原始答案已更新。

您可以使用新标签中文档对象的documentElement属性。这里的问题是，如果新选项卡的window.location的域设置为另一个站点（或者在您的情况下是数据字符串），某些浏览器会抱怨同源策略违规。

previewWinRef = window.open("about:blank");
previewWinRef.document.documentElement.innerHTML = editor.value;

在新窗口中预览在Textarea中键入的整个文档

2 个答案: