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

Posted 2023-02-21

【中文标题】在新窗口中预览在 Textarea 中键入的整个文档

【英文标题】：Preview Entire Document Typed in Textarea in New Window

【发布时间】：2014-12-31 20:00:13

【问题描述】：

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

但是，我让它按照我想要的方式工作的唯一方法是让我使用 base64 编码的 HTML 文件，它允许我将整个文档输出到窗口、doctype 等等。

如果我说，previewWinRef.document.write(editor.value)，那是行不通的。尝试后，它所做的只是追加到当前文档。

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

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

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

基本上，每次你按下一个键时，我都会刷新结果，只有当你通过文件->在新选项卡中打开来打开预览窗口时。出于某种原因，我似乎无法访问预览窗口的文档，即使编辑器窗口创建了它并且它只是一个数据 URL？ 窗口 Screenshot

Here is the editor.

【参考方案1】：

试试这个：

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

【讨论】：

我也在想这个，但我希望它是有效的 HTML。你不能只在另一个元素中有一个 doctype 和另一个 HTML 标记。

是的，但是如果没有 POST 到某个服务器，我想不出任何其他方法。

【参考方案2】：

原始答案已更新。

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

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

【讨论】：

试过这个。由于同源策略无法访问它。这很奇怪。

出于好奇，您能否发布您在遇到跨源错误时尝试使用的事件处理程序？

是的，我一回家就去。感谢您的帮助！

我无法在 Firefox（我的工作计算机上唯一的浏览器）中重现该问题。我想知道 Chrome 和 Firefox 实施相同的来源策略是否略有不同？今晚我将在运行 Chrome 的计算机上使用它。

另外，您可以尝试使用window.open("http://rickyyoder.x10.mx/") 打开第二个窗口。这应该会强制两个选项卡具有相同的域...