当前位置：首页 > 软件开发 > Web开发 > JavaScript

在网页上Run Code (测试代码) 功能

来源：岁月联盟编辑：exp 时间：2012-02-11

平时在很多论坛或者博客中,都可以看到作者或者评论者的文章中,都会摆出一段代码,并且能实现在线测试.

实现此功能的代码如下:

[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="MapleJan" />
<title>Run Code</title>
<meta name="description" content="在网页上测试文本框中的代码.">
<script>
function runCode(textId) {
    var code = document.getElementById(textId).value;
    var newWindow = window.open();
    newWindow.opener = null; //对创建该窗口(newWindow)的Window不进行任何操作.
    newWindow.document.write(code);
    newWindow.document.close(); //关闭open()方法打开的文文档流.
};
function copyCode(textId) {
    if(window.clipboardData) { //判断浏览器,目前仅支持IE
    var otext = document.getElementById(textId).value;
    window.clipboardData.setData('text',otext);
    alert('复制成功!');
    } else {
    alert("你的浏览器不支持此功能,请手动选取文本进行复制!");
    }
};
</script>
<style>
#text-code {
    font-size: 12px;
    height: 300px;
    width: 500px;
    resize: none;
}
</style>
</head>
<body>
<span style="white-space:pre">    </span><div>
<span style="white-space:pre">        </span><textarea id="text-code"><b>Hi,This is my <a href="http://maplejan.com/">website</a>!</b></textarea>
<span style="white-space:pre">        </span><br />
<span style="white-space:pre">        </span><input onclick="runCode('text-code')" type="button" value="运行代码">
<span style="white-space:pre">        </span><input type="button" value="复制代码" onclick="copyCode('text-code')">
<span style="white-space:pre">    </span></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="MapleJan" />
<title>Run Code</title>
<meta name="description" content="在网页上测试文本框中的代码.">
<script>
function runCode(textId) {
var code = document.getElementById(textId).value;
var newWindow = window.open();
newWindow.opener = null; //对创建该窗口(newWindow)的Window不进行任何操作.
newWindow.document.write(code);
newWindow.document.close(); //关闭open()方法打开的文文档流.
};
function copyCode(textId) {
if(window.clipboardData) { //判断浏览器,目前仅支持IE
var otext = document.getElementById(textId).value;
window.clipboardData.setData('text',otext);
alert('复制成功!');
} else {
alert("你的浏览器不支持此功能,请手动选取文本进行复制!");
}
};
</script>
<style>
#text-code {
font-size: 12px;
height: 300px;
width: 500px;
resize: none;
}
</style>
</head>
<body>
<span style="white-space:pre"> </span><div>
<span style="white-space:pre">  </span><textarea id="text-code"><b>Hi,This is my <a href="http://www.2cto.com/">website</a>!</b></textarea>
<span style="white-space:pre">  </span><br />
<span style="white-space:pre">  </span><input onclick="runCode('text-code')" type="button" value="运行代码">
<span style="white-space:pre">  </span><input type="button" value="复制代码" onclick="copyCode('text-code')">
<span style="white-space:pre"> </span></div>
</body>
</html>
Demo