站长资源
全栈工程师站点

如何给自己的网页增加一个代码运行框

如何给自己的网页增加一个代码运行框

一些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的区别,不了解的同学赶紧去补习一下吧。

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 如何给自己的网页增加一个代码运行框

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 如何给自己的网页增加一个代码运行框

评论 抢沙发

评论前必须登录!