一些以展示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
|