教你如何在部落格園放“可運行”代碼

<script type="text/javascript"><br />alert("你知道我是怎麼彈出的嗎？");<br /></script>
      自從看到別人的部落格可以放上面那種可啟動並執行代碼後，我一直在研究這種效果是怎麼弄出來的，我知道藍色理想上面可以在編輯器裡直接將代碼放進一個可啟動並執行代碼框，發布後就是可啟動並執行了。但部落格園的預設的三個編輯器裡，死活找不到那可啟動並執行按鈕。直到昨天，在群裡某高手提示說可以自己寫一個，然後他給我說了思路，並提供了一個demo，就是在頁面嵌入一個textarea，然後單擊運行代碼時，將textarea裡的所有內容在新open的頁面裡執行，就行了。我在本地測試，實踐結果是可行的，但一放上部落格園這裡，<script>總給過濾掉了，實在是鬱悶得很。無奈，昨天又以失敗告終。      今天，就在剛剛，我又在某群發問了，另一高手回答了我的問題，我才知道，怎樣才能讓script不被過濾。下面，是步驟：      1.首先，準備一個textarea，這個文字框裡放上我們所要執行的代碼，可以是任意代碼，比如一個標準的html頁，也可以像我下面一樣，直接放上一段js代碼，如下：

<textarea cols="20" rows="8" id="con">

<script type="text/javascript">      alert("你知道我是怎麼彈出的嗎？");</script>

</textarea><input value="運行代碼" type="button" id="btn" />

要啟動並執行代碼準備好了，但我們並不能直接將他放在頁面，請看下一步驟：      2.單擊紅圈中的HTML按鈕：，在彈出的對話方塊裡將第一步驟裡準備的代碼放到所要放的位置上。（註：如果放上去後更新後，發現文字框裡的<script>並不能正常顯示，如多了個&mce：碼或者其他什麼的，請重新單擊HTML，將多餘轉碼刪除。）      基本條件已具備，現在就需要一個JS來擷取這個文字框裡的內容，並open一個新頁，將這些內容放在新頁裡執行了。這，是關鍵內容。請看第3步：      3.準備一個js檔案，js檔案裡放上以下代碼:

window.onload = function(){    var btn = document.getElementById("btn");    var con = document.getElementById("con");    btn.onclick = function(){        var sun = window.open("");        sun.document.write(con.value);    }}

這代碼是跟上面的textarea對應的，如果修改了textarea或button的id，則這裡也要修改，並不是通用的呵呵，只是我寫的粗糙的測試代碼。代碼準備好後，儲存為一個js檔案，我這裡儲存為littledu.js。接著，我們要將這檔案上傳到部落格園上，將在頁面引用它。請看第4步：      4.單擊部落格首頁的“管理”，進入管理頁面，在管理頁面裡單擊[檔案] 索引標籤，進入，並上傳littledu.js檔案，上傳完畢後單擊該檔案，複製地址欄的地址，此為該js檔案的地址。如，我的littledu.js檔案地址為:http://files.cnblogs.com/littledu/littledu.js。  接著，最關鍵的一步來了，請看第5步:5.按照第4步的步驟，進入管理頁面，但這次，我們要進入“設定”選項卡，在設定選項卡下的“頁首html代碼”框裡，放上我們的js檔案地址，:到這裡，就已經完成了。發布後，單擊運行代碼，效果出來啦！！！整個世界是如此的美好，阿門。/*****************************華麗的分隔線********2011-5-10日修改****************************/粗糙的代碼就是不行，今天放代碼時遇到這樣一個問題，在ff和ie裡，啟動並執行頁面需要重新整理一次才能正常運行，而chrome裡乾脆只執行了html和css，對js是完全忽略掉了。很是奇怪，但別人的不管在什麼瀏覽器都正確運行啊，沒理由是我的瀏覽器問題。最後，想到會不會是我的littledu.js裡的代碼不夠好，為了測試是不是這樣的，我專門去firebug了某高手的部落格，提取到了他的open代碼，替換掉我上面的粗糙代碼，還真的是，所以瀏覽器都正常了，唉！！！！！！！！！
下面是新的littledu.js代碼

window.onload = function(){    var btn = document.getElementById("btn");    var con = document.getElementById("con");    btn.onclick = function(){        var newwin = window.open('', "_blank", '');        newwin.document.open('text/html', 'replace');        newwin.opener = null;        newwin.document.write(con.value);        newwin.document.close();    }}

也可以直接通過http://files.cnblogs.com/littledu/littledu.js這裡下載。