站长资源
一些web技术类博客以及素材代码的网站中，我们经常会看到可以在线运行代码，很多朋友都对此感到很神奇，其实原理大家明白之后大家就恍然大悟了。
今天就教给大家如何给自己的网站增加一个代码运行框
实现的思路
1、我们需要一个文本框来接收我们的代码
<textarea></textarea>
2、我们需要把接收到的代码在网页上运行
那么如何在网页上运行？
我们知道前端的代码都是通过浏览器解析之后展现在我们的面前
也就说浏览器本身就是可以识别前端代码的
那么我们就利用这一点让接收到的代码在新的页面上运行
我们新建一个run()方法，使用Js的open()函数来创建一个新窗口
open()方法有四个参数
open(URL,name,features,replace)
看我们如何书写run()方法
function run() {
temp = document.script.tester.value;
rundemo = open("", "rundemo", "status=no,menubar=yes,toolbar=no");
rundemo.document.open();
rundemo.document.write(temp);
}
细心的同学可以发现我们并没有使用window.open()而是使用了document.open()
因为我们要追加内容
rundemo.document.write(temp);
所以这里使用的是document对象
这样我们就给自己的网页增加了一个代码运行框的小功能，是不是很简单，最后完善一下代码，增加两个按钮，一个运行，一个清除，是不是有模有样了呢，o(∩_∩)o 哈哈
附完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何给自己的网页增加一个代码运行框</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="middle"><font color="red">粘贴您要运行的html代码</font></td>
</tr>
<tr>
<td align="middle">
<form name="script">
<textarea name="tester" rows="8" wrap="off" cols="50"></textarea>
<br>
<input onclick="run()" type="button" value="运行">
<input onclick="reset()" type="button" value="清除">
</form>
</td>
</tr>
</tbody>
</table>
<script>
function reset() {
document.script.reset();
}
function run() {
temp = document.script.tester.value;
rundemo = open("", "rundemo", "status=no,menubar=yes,toolbar=no");
rundemo.document.open();
rundemo.document.write(temp);
}
</script>
</body>
</html>
我们可以看到并没有太多复杂的代码，也没有借助插件，很容易就实现了代码运行框的功能，难点再于window.open和document.open的区别，不了解的同学赶紧去补习一下吧。
本文由站长资源原创首发，转载请注明出处
评论前必须登录！
注册