CODEWITHSUNDEEP
javascripthtml
Puspam
Puspam

Reputation: 2777

Executing HTML code inside a DIV through JavaScript

I have seen many questions like this one, but my question is slightly different.

I wrote an HTML code that can execute another HTML code inside a <div>. The page looks like this: enter image description here

The code of this page is this:

<html>
    <meta name="viewport" content="width=device-width"/>
    <style>
        html, body{margin: 0; padding: 0;}
        textarea {width:100%; height: 28%;}
        div {display: block; width: 100%;}
    </style>
    <body onload="loadData()" onbeforeunload="storeData()" onunload="this.onbeforeunload()">
        <div style="overflow: auto;">
            <textarea id="code"></textarea>
        </div>
        <div>
            <button onclick="run()" style="float: left;">Run</button>
            <button onclick="setSize()" style="float: right;">Set size</button>
            <input type="number" id="size" style="float: right; text-align: right;"/>
        </div>
        <div id="result" style="overflow: auto; height: 70%; border-top: 2px solid black;"></div>
    </body>
    <script>
        const editor=document.getElementById('code');
        function run()
        {
            var res=document.getElementById('result');
            var input=editor.value;
            res.innerHTML=input;
        }
        function setSize()
        {
            editor.style.fontSize=document.getElementById("size").value;
            document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
            document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
            document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
        }
        function storeData()
        {
            var data=document.getElementById("code").value;
            var txtSize=document.getElementById("size").value;
            localStorage.setItem("stored", data);
            localStorage.setItem("size", txtSize);
        }
        function loadData()
        {
            var data=localStorage.getItem("stored");
            var txtSize=localStorage.getItem("size");
            document.getElementById("code").value=data;
            document.getElementById("size").value=txtSize;
            editor.style.fontSize=txtSize;
            document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
            document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
            document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
        }
    </script>
</html>

It is working absolutely correct, except one thing. The problem is that, if a <button> is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared. See these screenshots: enter image description here

enter image description here

So, can you tell any way by which I can ensure that no changes can be done to the original page? Please help a class 10 student.

Upvotes: 2

Views: 1296

Answers (2)

Joe
Joe

Reputation: 239

The problem is that, if a is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared.

That is exactly what is supposed to happen when document.write() is called. That function always replaces the entire page with whatever is in the quotes.

The solution is to simply never call that method. If there is some reason why you want to call document.write, you need to explain what that is in your question so we can suggest an appropriate alternative.

Upvotes: 0

Bane Bojanić
Bane Bojanić

Reputation: 712

Instead of having 'result' as a regular div element, which is meant to represent a section of the actual page, what you want here is to embed a whole separate page/context, which is something that iframe is used for.

I managed to accomplish what you wanted by replacing the div with an iframe, and the first line in the 'run' method with this:

var res=document.getElementById('result').contentDocument.body;

See this fiddle for an example.

Upvotes: 2

Related Questions