在Z-Blog中運(yùn)行代碼[html][/html]（純JS版）
更新時(shí)間：2007年03月25日 00:00:00 作者：
昨天的《利用th,colgroup,col定義表格樣式》中，細(xì)心點(diǎn)的朋友會發(fā)現(xiàn)加了一個(gè)“運(yùn)行代碼”的鏈接：直接點(diǎn)擊可以運(yùn)行Textarea中的內(nèi)容。其實(shí)本身藍(lán)色理想、51JS上也有相關(guān)介紹，Z-Blog官方論壇上也有類似帖子，因?yàn)樽约翰惶矚g改asp的內(nèi)容（將來升級省得替換），所以偷了個(gè)小懶，做了一個(gè)純JS版本的。
是否兼容FireFox，還沒來得及測試。自己覺得“另存為”和“復(fù)制”功能也比較多余，這里也省略掉了。如果需要Fix Bug或者技術(shù)支持，歡迎給我留言^_^ 具體代碼如下：
function RunCode() {
var ele = document.getElementsByTagName("textarea");
for (var i=0; i<ele.length; i++) {
with (ele[i]) {
if (className != "code") continue;
var o = document.createElement("p");
var a = document.createElement("a");
var em = document.createElement("em");
o.className = "runCode";
a.href = "javascript:;";
a.innerHTML = "運(yùn)行代碼";
a.onclick = function() {
var win = window.open('', "_blank", '');
win.document.open('text/html', 'replace');
win.document.writeln(this.parentNode.previousSibling.value.replace(/\u00a0/gi, " "));
win.document.close();
}
em.innerHTML = "（提示：您可以先修改部分代碼再運(yùn)行）";
o.appendChild(a);
o.appendChild(em);
insertAdjacentElement("afterEnd",o);
}
}
}
目前“運(yùn)行代碼”功能是放在Textarea下方的，如果想放在上方，改動(dòng)以下代碼即可。
insertAdjacentElement("afterEnd",o);
this.parentNode.previousSibling.value
其中的replace(/\u00a0/gi, " ")主要是為了將被c_function.asp文件替換的空格（ ）和Tab（ ）還原回來。使用方面當(dāng)然是在所需頁面onload進(jìn)來即可，有多少個(gè)className為code的Textarea，就有多少個(gè)“運(yùn)行代碼”功能，夠簡單吧？
是否兼容FireFox，還沒來得及測試。自己覺得“另存為”和“復(fù)制”功能也比較多余，這里也省略掉了。如果需要Fix Bug或者技術(shù)支持，歡迎給我留言^_^ 具體代碼如下：
復(fù)制代碼 代碼如下:
function RunCode() {
var ele = document.getElementsByTagName("textarea");
for (var i=0; i<ele.length; i++) {
with (ele[i]) {
if (className != "code") continue;
var o = document.createElement("p");
var a = document.createElement("a");
var em = document.createElement("em");
o.className = "runCode";
a.href = "javascript:;";
a.innerHTML = "運(yùn)行代碼";
a.onclick = function() {
var win = window.open('', "_blank", '');
win.document.open('text/html', 'replace');
win.document.writeln(this.parentNode.previousSibling.value.replace(/\u00a0/gi, " "));
win.document.close();
}
em.innerHTML = "（提示：您可以先修改部分代碼再運(yùn)行）";
o.appendChild(a);
o.appendChild(em);
insertAdjacentElement("afterEnd",o);
}
}
}
目前“運(yùn)行代碼”功能是放在Textarea下方的，如果想放在上方，改動(dòng)以下代碼即可。
insertAdjacentElement("afterEnd",o);
this.parentNode.previousSibling.value
其中的replace(/\u00a0/gi, " ")主要是為了將被c_function.asp文件替換的空格（ ）和Tab（ ）還原回來。使用方面當(dāng)然是在所需頁面onload進(jìn)來即可，有多少個(gè)className為code的Textarea，就有多少個(gè)“運(yùn)行代碼”功能，夠簡單吧？
相關(guān)文章
這篇文章主要介紹了JS閉包原理及其使用場景解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12![JavaScript面向?qū)ο笾w會[總結(jié)]](http://img.jbzj.com/images/xgimg/bcimg1.png)
JavaScript面向?qū)ο笾w會[總結(jié)]
看過很多JavaScript書，對JavaScript的面向?qū)ο笾v的都比較深入，但是并沒有做到深入淺出，總結(jié)了我做的一些JavaScript程序的經(jīng)驗(yàn)，以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶?shí)現(xiàn)。2008-11-11
這篇文章主要介紹了淺談小程序globalData的那些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。本文重點(diǎn)給大家介紹Bootstrap零基礎(chǔ)入門教程(三) ，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
這篇文章主要介紹了JavaScript實(shí)現(xiàn)輪播圖效果，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-10-10
js對文字編碼有3個(gè)函數(shù)： escape,encodeURI,encodeURIComponent， 對應(yīng)的解碼函數(shù)：unescape,decodeURI,decodeURIComponent2011-12-12
getElementByID、createElement、appendChild幾個(gè)DHTML元素
WEB標(biāo)準(zhǔn)下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問2008-06-06
JavaScript實(shí)現(xiàn)頁面截圖3種解決方案
網(wǎng)頁截圖是指將網(wǎng)頁上的內(nèi)容截取下來,并保存為圖片的過程,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面截圖的3種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
什么是閉包呢？閉包就是函數(shù)實(shí)例執(zhí)行過程中動(dòng)態(tài)產(chǎn)生一個(gè)沒有被釋放資源的棧區(qū)，也是一個(gè)預(yù)執(zhí)行的過程。2011-01-01
這篇文章主要給大家介紹了關(guān)于原生js中運(yùn)算符及流程控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01