您的位置：首页 > 编程语言

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

2014-05-20 16:47 387 查看
经常看到别人的博客或介绍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(/</g, '<');
code = code.replace(/>/g, '>');
code = code.replace(/&/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(/</g, '<');
code = code.replace(/>/g, '>');
code = code.replace(/&/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-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(/</g, '<');
code = code.replace(/>/g, '>');
code = code.replace(/&/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一下到本地 自己试一下吧

// var normalizeCode = function (code) {
code = code.replace(/</g, '<');
code = code.replace(/>/g, '>');
code = code.replace(/&/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);
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航