Question

我正在开发一个应用程序，允许用户在与我的应用程序特定代码相关的ace-editor中添加其JavaScript和html代码。布局将如下所示：

希望您能得到我想要做的，当用户单击运行按钮时，将执行以下脚本，但是我不知道如何打印用户编写的代码的输出。

运行功能代码：

    let { jsVal, htmlVal, cssVal } = this.state; // this gets all three editor values
       var script = document.createElement('script');
       var iframe = document.createElement('iframe');
       var html = `<html><head><style>${cssVal}</style></head><body>${htmlVal} <script>${jsVal}</script></body></html>`;
       iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
       document.body.appendChild(iframe);
       iframe.contentWindow.document.open();
       iframe.contentWindow.document.write(html);
       iframe.contentWindow.document.close();
       iframe.onload = function() {
           var div = iframe.contentWindow.document;
           iframe.contentWindow.document.getElementsByTagName('html')[0]
        };

iframe.contentWindow.document.getElementsByTagName('html')给了我这个，

<html><head><style>#editor {
                       background: "#ddd";
                                               }</style></head><body><div id="editor">Thu Feb 28 2019 18:36:07 GMT+0530 (India Standard Time)</div><script>document.getElementById('editor').innerHTML = Date()</script></body></html>

我很难在输出容器中执行此操作，这方面的任何线索或帮助都将成为我的工作。如果您需要更多详细信息，我准备提供。预先感谢。

Answer 1

Ace-Editor只是一个编辑器。如果要执行代码，则需要自己实现...

try Vm for execute js code in nodejs

Answer 2

如果除了的所有JavaScript执行均按预期工作，则问题可能在于更改innerHTML（或使用DataURL）不会自动[重新-]执行<script> s-您将需要调用iframe.contentWindow.eval，或将它们的一次性副本附加到document.head（请参见here）

如何在ace-editor中执行用户代码

2 个答案: