Javascript 如何从textarea获取html、css、js代码并进行编译_Javascript_Html_Css

Javascript 如何从textarea获取html、css、js代码并进行编译

javascript html css

Javascript 如何从textarea获取html、css、js代码并进行编译,javascript,html,css,Javascript,Html,Css,我从我的客户端获得了一些html、css和js的3个独立文本区的代码。我想在div元素中运行该代码。我找不到正确的解决办法。如果已经有解决方案，请解释或转发给我。HTML、CSS、JS的基本级编译器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Web Editor</title> <meta content='width=dev

我从我的客户端获得了一些html、css和js的3个独立文本区的代码。我想在div元素中运行该代码。我找不到正确的解决办法。如果已经有解决方案，请解释或转发给我。

HTML、CSS、JS的基本级编译器

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Editor</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
</head>

<style type="text/css">

.code-frm-scratch-tag-heading{
height: 10%;
border-top-left-radius:  5px;
border-top-right-radius: 5px;
width: 100%;
display: block;
text-align: center;
justify-content: center;

}
.code-frm-scratch-fd{
    width: 100%;
    height: 90%;
    background-color: #9a9a9a33;
    border-radius: 4px;
    border-top-left-radius: 0px;
}
[contentEditable=true]:empty:not(:focus):before{
        content:attr(data-text)
    }

</style>   
 <body >
        <table style="width: 100%;height:245px;">
            <tr>
                <td style="width: 33%;height: 100%;">

                    <div class="code-frm-scratch-tag-heading" >

                      <div style="background-color: #0067ff;height: 100%;width: 55px;color: white;border-top-right-radius: 5px;border-top-left-radius:5px;display: table;  ">HTML</div>
                     </div>
                    <div style="background-color: #9a9a9a33;height: 90%;padding: 2px;border-radius: 5px;border-top-left-radius: 0px;">
                    <div id="html" data-text="Enter html code  here" style="height:100%;overflow: auto;word-wrap: break-word;max-width: 496px;max-height: 212px;" class="content" spellcheck="false" contentEditable="true" ></div></div>



                </td>
                <td  style="width: 33%;height:100%;">

     <div class="code-frm-scratch-tag-heading" >

                      <div style="background-color: #0067ff;height: 100%;width: 55px;color: white;border-top-right-radius: 5px;border-top-left-radius:5px;display: table;  ">CSS</div>
                     </div>


                    <div style="margin-left: 1.5px;background-color: #9a9a9a33;height: 90%;padding: 2px;border-radius: 5px;border-top-left-radius: 0px;">
                    <div id="css" style="height:100%;overflow-y: scroll;word-wrap: break-word;"  data-text="Enter css code  here" class="content" spellcheck="false" contentEditable="true"></div></div>
                </td>
                <td style="width: 33%;height:100%;">



     <div style="height: 10%;border-top-left-radius:  5px;border-top-right-radius: 5px;width: 100%;display: block;text-align: center;justify-content: center;" >

                      <div style="background-color: #0067ff;height: 100%;width: 55px;color: white;border-top-right-radius: 5px;border-top-left-radius:5px;display: table;  ">JS</div>
                     </div>    


                    <div style="margin-left: 1.5px;background-color: #9a9a9a33;height: 90%;padding: 2px;border-radius: 5px;border-top-left-radius: 0px;">
                    <div id="js" style="height:100%;overflow-y: scroll;word-wrap: break-word;"  data-text="Enter js code  here" class="content" spellcheck="false"   contentEditable="true"></div></div>
                </td>
                </table>    


   <div style="width:100%;height: 8px; "></div>


     <table style="width: 100%;height: 245px;" >
                        <tr > <td style="height: 100%;">

     <div class="code-frm-scratch-tag-heading" >

                      <div  style="background-color: #0067ff;height: 100%;width: 78px;color: white;border-top-right-radius: 5px;border-top-left-radius:5px;display: table;  ">OUTPUT</div>
                     </div>


                    <iframe id="output" frameborder="0" class="code-frm-scratch-fd" ></iframe> </td> </tr>        
                </table>               

    </body>
</html>
<script>
window.onload=function(){
    var html=document.getElementById("html"),
        css=document.getElementById("css"),
        js=document.getElementById("js"),
        output=document.getElementById("output"),
        working=false,
        fill=function(){
            if(working){
                return false;
            }
            working=true;
            var document=output.contentDocument,
                style=document.createElement("style"),
                script=document.createElement("script");
            document.body.innerHTML=html.textContent;
            style.innerHTML=css.textContent.replace(/\s/g,"");
            script.innerHTML=js.textContent;
            document.body.appendChild(style);
            document.body.appendChild(script);
            working=false;
        };
    html.onkeyup=fill;
    css.onkeyup=fill;
    js.onkeyup=fill;
}
</script>

js:

更新您的问题并明确说明您的要求。如果您尝试过任何代码，请将其上载。我认为您不理解。我没有尝试任何代码。实际上我不知道该怎么办。输入文本区域我从我的客户那里得到一些代码。现在如何运行它。你想为html css创建一个编译器吗？是的，你知道了。我从我的客户机获得一些代码，并使用in-div元素运行它

<!DOCTYPE html>
<html>
<body>    
<p id="demo">Click the button to change the layout of this paragraph</p>    
<button onclick="myFunction()">Click Me!</button>    
</body>
</html>

body{
background:red;
}

function myFunction() {
  var x = document.getElementById("demo");
  x.style.fontSize = "25px"; 
  x.style.color = "red"; 
}