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

最新推荐文章于 2024-10-11 07:58:02 发布

简生

最新推荐文章于 2024-10-11 07:58:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：测试 button xhtml 浏览器 function input

本文链接：https://blog.youkuaiyun.com/jiancm2001/article/details/7232753

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在网页上实现代码测试功能，常见于论坛和博客中。用户可以输入代码并直接在浏览器中运行，提升交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现此功能的代码如下:

<!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>
	<div>
		<textarea id="text-code"><b>Hi,This is my <a href="http://maplejan.com/">website</a>!</b></textarea>
		<br />
		<input onclick="runCode('text-code')" type="button" value="运行代码">
		<input type="button" value="复制代码" onclick="copyCode('text-code')">
	</div>
</body>
</html>

Demo