问我正在制作一个代码编辑器应用程序，它允许您执行HTML/CSS/JS代码，但是JavaScript只执行一次
EN

Stack Overflow用户

提问于 2019-03-25 14:17:58

回答 1查看 106关注 0票数 2

每个HTML、CSS和JS都有3个文本区域。例如，在CSS & HTML文本区域内键入：html { background: green; }将使iframe变为绿色，然后您可以将绿色更改为蓝色，而无需刷新页面，而iframe就会变成蓝色。但是，当我编写JS代码时，它只执行一次，例如，document.write("1");在iframe中打印1，但是如果我添加另一个document.write("2");，它将iframe保留为空。

    // Executing code when clicking RUN

$("#runButton").click(function() {                     // Adds the CSS code               // Adds the HTML code
    $("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val());
    /* ~~~~~~~~~~~~~~~ Placing the code from the containers into the iframe (BROWSER container) ~~~~~~~~~~~~~~~ */


            // Evaluating JavaScript 
        document.getElementById("browserFrame").contentWindow.eval($("#jsCode").val());


});

我希望在iframe中每次添加JS代码时都会出现新的输出，就像它对HTML和CSS所做的一样。请在这里试用一下：https://online-code-editor.netlify.com/

(不要介意消失的图标)

更新：

我发现这个document.getElementById("browserFrame").contentDocument.location.reload(true);

重新加载我的iframe，但是太快了，只有单击RUN才能使它工作吗？

或者说增加了一些延迟

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-25 17:00:50

而不是重新加载iframe -使用postMessage。

下面是一个示例--有一个带有HTML、CSS、JS textarea的父页面和一个沙箱iframe用于预览目的：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>
    <style>*{margin:0;box-sizing:border-box;} iframe,textarea{width:100%;min-height:3em;}</style>
</head>
<body>

    <textarea id="html">Hello, stack &lt;b&gt;overflow!&lt;/b&gt;</textarea>
    <textarea id="css">body {background: #F48024;}</textarea>
    <textarea id="js">document.body.innerHTML = "&lt;b&gt;World!&lt;/b&gt;";</textarea><br>
    <iframe id="iframe" src="iframe.html" sandbox="allow-same-origin allow-scripts allow-modals allow-forms" frameborder="0"></iframe>

    <script>
        const textareas = document.querySelectorAll("#css, #html, #js");
        const iframe = document.querySelector("#iframe");
        const post = () => textareas.forEach(el => iframe.contentWindow.postMessage({
            id: el.id,
            value: el.value
        }, '*')); // Use 'http://example.com' instead of '*'

        // Setup Events and Iframe Init
        textareas.forEach(el => el.addEventListener('input', post));
        iframe.addEventListener('load', post);
    </script>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Iframe</title>

    <style id="__app__css"></style>
    <script id="__app__js"></script>
    <script>
        window.addEventListener('message', (evt) => {
            // if (evt.origin !== "http://example.com") return; // Fix and uncomment in production
            document.getElementById(`__app__${evt.data.id}`).innerHTML = evt.data.value;
            if (evt.data.id==='js') eval(evt.data.value);
        });
    </script>
</head>

<body id="__app__html"></body>

</html>