适合网站设计的运行代码功能 - 启步网（7ibu.com）网络、IT(挨踢)职业游民学习娱乐之家.

适合网站设计的运行代码功能

作者： sunhy 阅读：来源：启步网时间：2007-1-24 16:37:42

字体：小中大

*/ -----------------------------------------------------------------------
*/ 出自: 启步网 http://www.7ibu.com
*/ 作者: sunhy
*/ 时间: 2007/01/ 24/ 首发 7ibu.com
*/ 声明: 转载请注明出处.
*/ -----------------------------------------------------------------------

作为网站建设类技术交流站，我们经常要用到源代码，并可以不断调试。这样就急需一种可解决的方案。

因为自己的站也有网站设计类栏目，并且主要是记录在职业工作中的成长历程，及一些心得体会等，所以sunhy一直是手工添加文章。遇到有代码的就比较头疼了，往往发表一篇带源码的文章就要调试多次！于是决定实现这个可在网页上实现直接运行代码的功能。这将不仅降低自己的工作量，还给用户更好的体验，何乐而不为呢？ ^_^

目前网站上可实现的有好几种解决方案。有js实现的，有asp实现的，sunhy这里介绍的是用js实现的，通过调用一个js文件，在web页面中实现可直接运行代码的功能！

首先我们来做js文件，代码如下：

//*********************************************************
//    function Preview(obj)  
//    {  
//      var TestWin=open('');  
//      TestWin.document.write(obj.value);  
//    }
//以上简单判断先注释掉，以后看情况要用的时候再开启，功能与运行文本域代码类似
// Copyright :启步网（7ibu.com） sunhy 2007-01-24
//*********************************************************

//运行文本域代码
function Preview(obj) {
 var TestWin=window.open('','',''); //打开一个窗口并赋给变量newwin。
 TestWin.opener = null // 防止代码对论谈页面修改
 TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
 TestWin.document.close();
}
//复制文本域代码
function copyCode(obj) {  
    var rng = document.body.createTextRange();  
    rng.moveToElementText(obj);  
    rng.scrollIntoView();  
    rng.select();  
    rng.execCommand("Copy");  
    rng.collapse(false);  
}  
//另存文本域代码
function saveCode(obj) {  
    var winname = window.open('', '_blank', 'top=10000');  
    winname.document.open('text/html', 'replace');  
    winname.document.writeln(obj.value);  
    winname.document.execCommand('saveas','','启步网(7ibu.com),网络、IT(挨踢)职业游民学习娱乐之家.htm');  
    winname.close();  
}  
//收藏本页代码
function addBookmark(title,url) {  
if (window.sidebar) {   
window.sidebar.addPanel(title, url,"");   
} else if( document.all ) {  
window.external.AddFavorite(url,title);  
} else if( window.opera && window.print ) {  
return true;  
}  
}

将上面的代码另存为code.js，这是前期工作。现在我们来看看怎么用这个功能吧，我讲方法，具体实现请大家自己稍微研究下：）

如何在网页中实现“运行代码”功能？请仔细看看下面的代码：

总结：如果你熟悉或者精通一种web编程语言，则可以写个随即函数，赋值给 TEXTAREA id ，这样在使用的时候就不会因为id相同而冲突了。本例适合想增强网站交互，及用户体验的用户使用，比如加入在线web编辑器、加入bolg文章发表系统、加入论坛系统等等：）

责任编辑：一路狂奔

帐号：
密码：

Google提供的相关资源