JS实现网页中运行代码,复制代码的功能

2015-8-12 23:14| 发布者: CODETC| 查看: 3657| 评论: 0

一些以展示html特效的网站经常会在具体页面加一个运行代码这样的一个效果,即特效代码在textarea文本框内,下面有一个运行代码按钮,点击运行按钮,就直接运行了textarea内的代码。下面和大家分享一个这样的案例,其实这个挺简单的。



下面这段代码示例同时实现了预览代码,代码另存为和复制代码两个功能,注意这里的代码另存为,复制代码仅支持IE浏览器。


Javascript代码:
<script language="javascript">
var obj=document.getElementById('codeContent');
function runCode(){
	var code=obj.value;
	var newWindow=window.open('','','');
	newWindow.opener=null;
	newWindow.document.write(code);
	newWindow.document.close();
}
function saveCode(){
	var code=obj.value;
	var winname=window.open('','_blank','top=10000');
	winname.document.open('text/html','replace');
	winname.document.writeln(code);
	winname.document.execCommand('saveas','','phpernote.html');
	winname.close();
}
function copyCode(){
	if(isIE()){
		alert('代码已复制到剪贴板!');
	}else{
		alert('本页面复制功能仅支持IE浏览器!');
		return false;
	}
	var rng=document.body.createTextRange();
	rng.moveToElementText(obj);
	rng.scrollIntoView();
	rng.select();
	rng.execCommand("Copy");
	rng.collapse(false);
}
function isIE(){
	var Sys={};
	var ua=navigator.userAgent.toLowerCase();
	var s;
	(s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:false;
	return Sys.ie;
}
</script>

HTML代码:
<textarea id="codeContent" rows="9" cols="50">
在这里输入要运行的代码
</textarea>
<input type="button" onclick="runCode()" value="运行代码" />
<input type="button" onclick="copyCode()" value="复制代码" />
<input type="button" onclick="saveCode()" value="代码另存为" />
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-230-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部