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

最新推荐文章于 2023-10-08 20:31:27 发布

qklin

最新推荐文章于 2023-10-08 20:31:27 发布

阅读量1.3k

点赞数 3

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/qklin/article/details/9705373

版权

Web前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

如果身为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);
	else
		alert('暂只支持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.οnlοad=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="运行代码" οnclick="run()" />
	<input type="button" value="复制到剪贴板" οnclick="copy()" />
	保存文件名：<input type="text" value="文件名" id="myname" /> <input type="button" value="保存代码" οnclick="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" οnclick="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);
	else
		alert('暂只支持IE浏览器');
}

</script>

qklin

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript/CSS代码直接运行调试页面

是不是很多时候看到很多网站可以编辑好代码直接运行的功能如果身为web前端学习阶段的朋友或是随时需要调试自己写的js 可又懒得去打开编辑工具来写完整的代码那么这是你个一个小选择(因为现在在线的ide很多尤其是对web的开发的ide)，这个可是本地的哦不用网络随时可以给自己带来一点点小方便现在我们就来弄个很简单实现哦实现方法：利用window.open打开一个新页面
复制链接

扫一扫