在网页上加入运行代码的功能

经常看到别人的博客或介绍html/css/js的网站上有个功能是运行代码它是如何实现的下面就一起来写一下

最基本的实现方式是打开一个新的窗口向里面写入html代码它就会自动执行

var win = window.open('', "_blank", '');
    win.document.open('text/html', 'replace');
    win.opener = null;
    win.document.write(code);
    win.document.close();

这样直接把code写入到新窗口就可以了

但是直接写入的HTML会直接显示在页面上而不是由浏览器渲染后生成的这是为什么？

因为”< > & “这些个的存在所以需要转义一下

 var normalizeCode = function (code) {
        code = code.replace(/&lt;/g, '<');
        code = code.replace(/&gt;/g, '>');
        code = code.replace(/&amp;/g, '&');
        return code;
        };

接下来就没什么问题了

<!DOCTYPE html>
<html>
<head>
    <title>运行代码</title>

</head>
<body>
<textarea id="code" style="min-height: 200px;min- 90%;">
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>测试</title>
    </head>
    <body>
    <h1>测试一下</h1>
    </body>
    </html>

</textarea>

<button id="btn">运行</button>

<script>
    var normalizeCode = function (code) {
        code = code.replace(/&lt;/g, '<');
        code = code.replace(/&gt;/g, '>');
        code = code.replace(/&amp;/g, '&');
        return code;
    };
    var runCode = function () {
        //innerHTML需要转义
        var code = document.getElementById('code').innerHTML;
        //value不需要转义 但是在博客园上不能直接写value 它会给你转义
        //var code = document.getElementById('code').value;
        if (code != "") {
            console.log(code);
            code = normalizeCode(code);
            console.log(code);
            var win = window.open('', "_blank", '');
            win.document.open('text/html', 'replace');
            win.opener = null;
            win.document.write(code);
            win.document.close();
        }
    };
    var btn = document.getElementById('btn');
    btn.addEventListener('click', runCode, false);
</script>
</body>
</html>

实验一下因为是使用textarea 的innerHTML 所以不能通过修改下面的代码来达到修改运行结果的效果可使用textarea的value属性

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″/> <title>测试</title> </head> <body> <h1>测试一下</h1> </body> </html>

我们肯定使用过W3School的在线测试工具下面来做一个差不多的东西

<!DOCTYPE html>
<html>
<head>
    <title>运行代码</title>

</head>
<body>
<textarea id="code" style="min-height: 200px;min- 90%;">
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>测试</title>
    </head>
    <body>
    <h1>测试一下</h1>
    <script>
        document.write("哈哈哈");
    </script>
    </body>
    </html>

</textarea>
<iframe name="run" style="min-height: 100px;min- 90%"></iframe>
<button id="btn">运行</button>

<script>
    var normalizeCode = function (code) {
        code = code.replace(/&lt;/g, '<');
        code = code.replace(/&gt;/g, '>');
        code = code.replace(/&amp;/g, '&');
        return code;
    };
    var runCode = function () {
        var code = document.getElementById('code').value;
        if (code != "") {
            console.log(code);
            code = normalizeCode(code);
            console.log(code);
            var win = window.open('', "run", '');
            win.document.open('text/html', 'replace');
            win.opener = null;
            win.document.write(code);
            win.document.close();
        }
    };
    var btn = document.getElementById('btn');
    btn.addEventListener('click', runCode, false);
</script>
</body>
</html>

效果如下

Copy一下到本地自己试一下吧

在网页上加入运行代码的功能

Published by

风君子

发表回复取消回复

Published by

风君子

发表回复 取消回复

发表回复取消回复