自從看到別人的博客能夠放上面那種可運行的代碼後,我一直在研究這種效果是怎麼弄出來的,我知道藍色理想上面能夠在編輯器裏直接將代碼放進一個可運行的代碼框,發佈後就是可運行的了。但博客園的默認的三個編輯器裏,死活找不到那可運行的按鈕。直到昨天,在羣裏某高手提示說能夠本身寫一個,而後他給我說了思路,並提供了一個demo,就是在頁面嵌入一個textarea,而後單擊運行代碼時,將textarea裏的全部內容在新open的頁面裏執行,就好了。我在本地測試,實踐結果是可行的,但一放上博客園這裏,<script>總給過濾掉了,實在是鬱悶得很。無奈,昨天又以失敗了結。javascript
今天,就在剛剛,我又在某羣發問了,另外一高手回答了個人問題,我才知道,怎樣才能讓script不被過濾。下面,是步驟:css
.首先,準備一個textarea,這個文本框裏放上咱們所要執行的代碼,能夠是任意代碼,好比一個標準的html頁,也能夠像我下面同樣,直接放上一段js代碼,以下:html
<textarea cols="" rows="" id="con"> <script type="text/javascript"> alert("你知道我是怎麼彈出的嗎?"); </script> </textarea> <input value="運行代碼" type="button" id="btn" />
要運行的代碼準備好了,但咱們並不能直接將他放在頁面,請看下一步驟:java
.單擊如圖所示紅圈中的HTML按鈕:,在彈出的對話框裏將第一步驟裏準備的代碼放到所要放的位置上。(注:若是放上去後更新後,發現文本框裏的<script>並不能正常顯示,如多了個&mce:碼或者其餘什麼的,請從新單擊HTML,將多餘轉碼刪除。)chrome
基本條件已具有,如今就須要一個JS來獲取這個文本框裏的內容,並open一個新頁,將這些內容放在新頁裏執行了。這,是關鍵內容。請看第步:瀏覽器
.準備一個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。接着,咱們要將這文件上傳到博客園上,將在頁面引用它。請看第步:code
.單擊博客首頁的「管理」,進入管理頁面,在管理頁面裏單擊「文件」選項卡,進入,並上傳littledu.js文件,上傳完畢後單擊該文件,複製地址欄的地址,此爲該js文件的地址。如,個人littledu.js文件地址爲:http://files.cnblogs.com/littledu/littledu.js。 接着,最關鍵的一步來了,請看第步:htm
.按照第步的步驟,進入管理頁面,但此次,咱們要進入「設置」選項卡,在設置選項卡下的「頁首html代碼」框裏,放上咱們的js文件地址,如圖:
到這裏,就已經完成了。發佈後,單擊運行代碼,效果出來啦!!!
整個世界是如此的美好,阿門。
/*****************************華麗的分隔線********--日修改****************************/
粗糙的代碼就是不行,今天放代碼時遇到這樣一個問題,在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(); } }