JS在网页中运行、复制、保存代码_如何在网页写代码并保存使用的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/linyiphp/article/details/79020922

本文介绍了一种使用JavaScript实现的在线代码编辑器功能，包括直接在浏览器中运行JavaScript代码、复制代码片段以及将代码保存为HTML文件的方法。通过简单的HTML页面与JavaScript脚本结合，实现了这些实用的功能。

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

JS在网页中运行、复制、保存代码 - 临沂程序员 - 临沂PHP程序员

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS在网页中运行、复制、保存代码</title>
<script type="text/javascript">
function runCode(obj){
var winname = window.open("", "_blank","resizable=yes,scrollbars=yes,status=yes");
winname.document.open("text/html", "replace");
winname.document.writeln(obj.value);
winname.document.close();
}
function saveCode(obj,filename){
var winname = window.open("", "", "top=10000,left=10000");
winname.document.open("text/html", "replace");
winname.document.writeln(obj.value);
winname.document.execCommand("saveas", "", filename + ".htm");
winname.close();
}
function copyCode(obj){
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
</script>
</head>

<body>

<textarea id="mycode" style=" width:680px; height:208px; border:1px solid #666;"></textarea>
<div>
<input style="background:#E2F2F9;" type="button" οnclick="runCode(document.getElementById('mycode'))" value="运行代码" />
<input style="background:#E2F2F9;" type="button" οnclick="copyCode(document.getElementById('mycode'))" value="复制代码" />
<input style="background:#E2F2F9;" type="button" οnclick="saveCode(document.getElementById('mycode'), 'test')" value="保存代码" />
<p>提示：您可以先修改部分代码再运行</p>
</div>

</body>
</html>