javascript/CSS代码直接运行调试页面

来源：互联网发布：网络之混元法师txt下载编辑：程序博客网时间：2024/05/21 11:31

是不是很多时候看到很多网站可以编辑好代码直接运行的功能

如果身为web前端学习阶段的朋友或是随时需要调试自己写的js 可又懒得去打开编辑工具来写完整的代码那么这是你个一个小选择(因为现在在线的ide很多尤其是对web的开发的ide)，这个可是本地的哦不用网络随时可以给自己带来一点点小方便

看下效果图:

现在我们就来弄个很简单实现哦

实现方法：利用window.open打开一个新页面我们取得返回的窗口句柄然后利用这个窗口window的document.write写入内容即可了 核心代码就是这样

复制保存目前还只有IE的实现 其他论坛的一些实现貌似都是利用了flash的貌似利用html5可以做尝试实现复制和保存了呵呵以后在写吧

核心的js代码：

function run(){var code=document.getElementById('runcode').value;//alert(code);//var subWin=window.open('', "_blank", '');//全屏代码var subWin=window.open('', "_blank",'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+ ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');subWin.opener = null; // 防止代码对论谈页面修改subWin.document.open('text/html', 'replace'); //默认就是这个模式 可有可无subWin.document.write(code);subWin.document.close();}function save(myname) {var code=document.getElementById('runcode').value;var winname = window.open('', '_blank', 'top=10000');winname.document.open('text/html', 'replace');winname.document.write(code);winname.document.execCommand('saveas','',myname+'.html'); //IE支持  保存winname.close();}function copy() {if(window.ActiveXObject)window.clipboardData.setData("Text", document.getElementById('runcode').value);elsealert('暂只支持IE浏览器');}

以下是完整的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" /><title>前端js简单调试直接运行页 - http://blog.csdn.net/qklin</title><style>*{margin:0;padding:0}body{padding:20px;}fieldset{border:1px solid #c0c;padding:10px;width:500px;float:left;margin-right:15px;}legend{background-color:#ccc;border:1px solid #c0c;}</style></head><body><textarea class="pt" id="runcode" rows="30" cols="130" style="padding:3px; font-family:"Courier New",Courier,monospace;"><!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" /><title>前端js简单调试直接运行页 - http://blog.csdn.net/qklin</title><style></style><script>window.onload=function(){ alert('window.loaded!');}</script></head> <body></body></html></textarea><br /><fieldset>    <legend>操作菜单</legend><div style="margin-top:12px;height:auto;width:auto"><input type="button" value="运行代码" onclick="run()" /><input type="button" value="复制到剪贴板" onclick="copy()" />保存文件名：<input type="text" value="文件名" id="myname" /> <input type="button" value="保存代码" onclick="save(document.getElementById('myname').value)" /></div></fieldset><fieldset>    <legend>常用搜索</legend><div style="margin-top:12px;height:auto;width:auto"><form style="display:inline-block;margin-right:25px;" name="form1" method="get" action="http://www.baidu.com/s" target="_blank">百度：<input type="text" name="wd" value="" style="width:80px" id="so" /><input type="submit" value="百毒一下吧" /></form>谷歌：<input type="text" name="wd" value="" style="width:80px" id="gso" /><input type="button" onclick="window.open('http://www.google.com.hk/#newwindow=1&q='+encodeURI(document.getElementById('gso').value),'_blank','')" value="Google搜索" /></div></fieldset></body></html><script>function run(){var code=document.getElementById('runcode').value;//alert(code);//var subWin=window.open('', "_blank", '');//全屏代码var subWin=window.open('', "_blank",'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+ ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');subWin.opener = null; // 防止代码对论谈页面修改subWin.document.open('text/html', 'replace'); //默认就是这个模式 可有可无subWin.document.write(code);subWin.document.close();}function save(myname) {var code=document.getElementById('runcode').value;var winname = window.open('', '_blank', 'top=10000');winname.document.open('text/html', 'replace');winname.document.write(code);winname.document.execCommand('saveas','',myname+'.html'); //IE支持  保存winname.close();}function copy() {if(window.ActiveXObject)window.clipboardData.setData("Text", document.getElementById('runcode').value);elsealert('暂只支持IE浏览器');}</script>