纯js实现多个可在页面运行代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯js实现多个可在页面运行代码实例</title>
</head>
<body>
<div class='text-code'>
<textarea class="code-vessel" name="textarea" rows="10">
<h2>
他放不下陈年往事高调了一世<br>
没落贵族守着仅剩的自尊仍傲慢固执<br>
磨损的钻石<br>
狂妄不羁的城市<br>
在梦里依旧豪华极致<br>
——许哲佩《没落贵族》
</h2>
</textarea><br>
<button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
</div><br>
<div class='text-code'>
<textarea class="code-vessel" name="textarea" rows="10">
<h2>
我们的爱 只爱到一半<br>
约好的幸福 不能靠岸<br>
慢慢的习惯 享受着孤单<br>
偶尔也会被寂寞拆穿<br>
我们的爱只爱到一半<br>
手牵手的旅程 忘了走完<br>
曾经的浪漫 已被风吹散<br>
埋在心底的遗憾<br>
时间会替我们保管<br>
——魏晨《只爱到一半》
</h2>
</textarea><br>
<button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
</div><br>
<div class='text-code'>
<textarea class="code-vessel" name="textarea" rows="10">
<h2>
如果有一天 我们再见面<br>
时间会不会倒退一点<br>
也许我们都忽略<br>
互相伤害之外的感觉<br>
如果哪一天 我们都发现<br>
好聚好散不过是种遮掩<br>
如果我们没发现<br>
就给彼此多一点时间<br>
——梁静茹《如果有一天》
</h2>
</textarea><br>
<button class="run-code">运行代码</button><span class="run-info">您可以修改框中代码后运行查看<span>
</div>
<script>
//运行文本域代码 原生js实现
window.onload=function(){
var oRunCode=getByClass('button','run-code',1);
for(var i=0,len=oRunCode.length;i<len;i++){
oRunCode[i].onclick=function(){
var oParent=this.parentNode;
var codeVessel=getByClass(oParent,'code-vessel',0);
runCode(codeVessel[0]);
}
}
};
function runCode(cod1) {
var codeValue = cod1.value;
if (codeValue != "") {
//pageURL 为子窗口路径, name为子窗口句柄, parameters为窗口参数(各参数用逗号分隔)
var newwin = window.open('', '', ''); //打开一个窗口并赋给变量newwin。
newwin.opener = null; // 防止代码对论坛页面修改
newwin.document.write(codeValue); //向这个打开的窗口中写入代码，这样就实现了运行代码功能。
newwin.document.close();
}
}
function getByClass(oParent, sClass,bool){
var aResult=[];
if(bool){
var aEle=document.getElementsByTagName(oParent);
}else{
var aEle=oParent.getElementsByTagName('*');
}
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
// 或者使用jquery
/*
新窗口运行代码js
*/
/*
$(function(){
$('.run-code').click(function(){
var codeVessel=$(this).parent().find('.code-vessel').val();
runCode(codeVessel);
});
function runCode(cod1) {
if (cod1 != "") {
//pageURL 为子窗口路径, name为子窗口句柄, parameters为窗口参数(各参数用逗号分隔)
var newwin = window.open('', '', ''); //打开一个窗口并赋给变量newwin。
newwin.opener = null; // 防止代码对论坛页面修改
newwin.document.write(cod1); //向这个打开的窗口中写入代码，这样就实现了运行代码功能。
newwin.document.close();
}
}
})();
*/
</script>
</body>
</html>