How-to run HTML, CSS, JS code in iframe from textarea value

In this code we will be share with you how to create simple editor with preview for HTML CSS and JavaScript codes, we need textarea to write code and iframe to preview

 <style>
  #editor{padding:5px; outline:0; border:0; border-radius:3px;box-shadow: 0 0 3px 0}
  #editor:focus{border:1px #eee; }
   #editor, #FileFrame{margin-top:5px;margin-bottom:5px}
</style>

<textarea id="editor" style="width:100%; height:200px">
<img src="https://cdn.pixabay.com/photo/2021/04/01/15/37/fruits-6142591__340.jpg" style="width:192px; height:108px"/>
</textarea>
<button onclick="runcode()">Run code</button>
<iframe id="FileFrame" src="about:blank" style="width:100%; height:200px" ></iframe>

<script type="text/javascript">
 
  function runcode(){
  var editor=document.getElementById("editor").value;
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write(editor);
   doc.close();
  }
</script>

How-to run HTML, CSS, JS code in iframe from textarea value

☷✎

How-to run HTML, CSS, JS code in iframe from textarea value

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

JSON LD code generator - json ld product

How-to create html editor with context buttons

How-to run HTML, CSS, JS code in iframe from textarea value

Related

Comments

Post a Comment