在html中嵌入js运行框简单示例

      作为一个coder，通常会编写javascript脚本，为了方便在页面内直接查看测试结果最好有个可以运行的文本框。我们在园子里面也经常可以看见研究js的博客中嵌入了一个文本输入框，点击运行按钮可以查看js效果。其实实现这个并不是很难，几个js方法就搞定。如下所示：      

请输入要运行的html代码

 

首先我们来看运行代码如何实现: 

// 执行代码
function  runCode(obj) {
var  winname  =  window.open( '' ,  " _blank " ,  '' );
var  content  =  document.getElementById(obj).value;
winname.document.open( ' text/html ' ,  ' replace ' );
winname.opener  =   null
winname.document.writeln(content);
winname.document.close();
}

 

复制代码实现方法如下: 

// 复制代码
function  doCopy(obj)
{
     var  codeObj  =  document.getElementById(obj);
    clipboardData.setData( ' text ' , codeObj.innerText);
    alert( ' 已经复制代码 ' );
}

 

 

保存代码实现方法如下：

//  另存为文件
function  doSave(obj, filename)
{   
     var  win  =  window.open( '' ,  ' _blank ' ,  ' top=10000 ' );
     var  code  =  document.getElementById(obj).innerText;
    win.opener  =   null ;
    win.document.write(code);
    win.document.execCommand( ' saveas ' ,  true , filename);
    win.close();
}

 

最后一步就是在按钮点击事件中调用上述事件了:

< textarea  style ="width: 450; height: 300"  id ="theCode"  title ="双击运行代码"  ondblclick ="runCode('theCode');" > 请输入要运行的html代码
</ textarea >< br  />
< input  onclick ="runCode('theCode')"  value ="运行代码"  type ="button" >  
< input  onclick ="doCopy('theCode')"  value ="复制代码"  type ="button" >  
< input  onclick ="doSave('theCode','test.cs')"  value ="保存代码"  type ="button" >  

 

转载于:https://www.cnblogs.com/zzxbest/archive/2011/03/16/1985710.html