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

经常看到别人的博客或介绍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-width: 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属性

  

 

 

 

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

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

</head>
<body>
<textarea id="code" style="min-height: 200px;min-width: 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-width: 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一下到本地 自己试一下吧

posted @ 2014-05-20 16:47  强子~Developer  阅读(721)  评论(0)  编辑  收藏  举报