在 w3school 網站上的網頁中常會有可以讓讀者 "邊學邊試的網頁" 連結.

W3Sschool Tryit

點進去後呢, 頁面長這樣, 左邊是讀者可修改的文字區塊, 右邊則是網頁的結果:

Tryit Editor

下面的內容就是一個這種網頁的雛形. (很陽春: 文字區塊的內容可以改, 不能讀檔, 不能直接存檔, 沒有上色, 沒有文法檢查... 的功能)

<html>
<head>
<title>Tryit Editor Prototype</title>
<style>
textarea, iframe {
  background: white;
  border: 2px solid gray;
  height: 600px;
  width: 100%;
}
textarea#codes {
  color: blue;
  font-family: consolas;
  font-size: 14pt;
  line-height: 1.2em;
  margin: 0px;
  scroll: auto;
}
</style>
<script>
var codeSrc, docObj;
function myReload() {
  docObj.open();
  docObj.write(codeSrc.value);
  docObj.close();
}
function myClear() {
  codeSrc.value="";
  myReload();
}
function fnInit() {
  var iframe = document.getElementById('preview');
  docObj = iframe.contentDocument || 
          (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
  codeSrc = document.getElementById("codes");
  document.getElementById('pvBtn').addEventListener('click', myReload, true);
  document.getElementById('clrBtn').addEventListener('click', myClear, true);
  myReload();
}
window.addEventListener('load', fnInit, true);
</script>
</head>
<body>
<div>
  <button class='MBT1' id='pvBtn'>Preview</button>
  <button class='MBT1' id='clrBtn'>Clear</button>
<div>
<table style='padding: 2px; width:100%;'>
  <tr><td valign='top'>
    <form method='post' name='form1'>
    <textarea name='codes' id='codes'>
<!DOCTYPE html>
<html>
<head>
<style>
table { 
  border-collapse: separate; 
  border-spacing: 0 10px; 
  margin-top: -10px; /* correct offset on first border spacing if desired */
}
tr, td {
  border: solid 1px #000;
  border-style: solid none;
  padding: 10px;
  background-color: cyan;
}
</style>
</head>
<body>
<table>
  <tr><td>123</td><td>456</td><td>789</td></tr>
  <tr><td>123</td><td>456</td><td>789</td></tr>
  <tr><td>abc</td><td>def</td></tr>
</table>
</body>
</html>
    </textarea>
    </form></td>
    <td valign='top'>
      <iframe frameborder='0' id='preview' name='preview' src='about:blank'></iframe>
    </td>
  </tr>
</table>
</div>
</div>
</body>
</html>

大架構說明:

  • 第4~19行是 stylesheet, 不了解的請自己查一下 CSS 的語法及設定
  • 第20~41行是讓他動起來的 javascript, 解釋請看下一段
  • 第45~46行是二個按鈕, 這二個按鈕和第49~86行的 <div></div> 區塊被包在另一個 <div></div> 區塊中
    • 按鈕一 Preview 是重新把左手邊的文字區塊的內容寫到右手邊的頁面執行
    • 按鈕二 Clear 是把文字區塊的內容清空
  • 第48~83行是一個 <table></table> 區塊, 內容只有一行二欄.
    • 第一欄是一個 <textarea ...></textarea> 被包在一個 <form ...></form> 當中, 這個 <form ...></form> 是預留以後和 web server 溝通用的, 暫時用不到.
    • 第二欄內嵌了一個 <iframe></iframe>. 一般我們都用 <iframe></iframe> 來嵌入別的網站的內容, 這裡我們預備要接收左手邊的文字區塊的內容並把它當成網頁顯示出來.
    • 第52~76行被包在 <textarea ...></textarea> 當中, 是左手邊的文字區塊的預設內容, 也就是讀者可以自行修改的 HTML/CSS/Javascript 原始網頁內容


接下來是 javascript 的說明

var codeSrc, docObj;
function myReload() {
  docObj.open();
  docObj.write(codeSrc.value);
  docObj.close();
}
function myClear() {
  codeSrc.value="";
  myReload();
}
function fnInit() {
  var iframe = document.getElementById('preview');
  docObj = iframe.contentDocument || 
          (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
  codeSrc = document.getElementById("codes");
  document.getElementById('pvBtn').addEventListener('click', myReload, true);
  document.getElementById('clrBtn').addEventListener('click', myClear, true);
  myReload();
}
window.addEventListener('load', fnInit, true);

JavaScript 說明:

  • 第1行定義了二個變數 codeSrc, 及 docObj. 稍後函數 fnInit() 會取得對應的物件參考並儲存在這二個變數中.
  • 第2~6行是函數 myReload() 的內容, 它呼叫 open() 以便接下來把 codeSrc.value 寫入到 docObj 物件中, 然後呼叫 close(), 來觸發文件內容的 rendering.
  • 第7~10行是函數 myClear() 的內容, 它把 codeSrc.value 設定為空字串, 再執行一次 myReload().
  • 第11~19行是函數 fnInit() 的內容
    • 取得物件參考備用
      • 第12行取得 ID 是 preview 的 HTML 物件的參考, 暫存在一個函數內部變數 iframe 中.
      • 第13~14行再以 iframe 為基礎在 <iframe></ifram> 物件中取得 contentDocument 物件參考, 儲存在變數 docObj 備用. 這裡沒有用 polyfill 或者是 shim 而直接使用 browser 相容性檢查的寫法, 可以相容於一些比較舊的 browser 版本. 我們等一下需要把網頁內容塞給它, 所以需要取得它的 contentDocument 物件參考.
      • 第15行取得 ID 是 codes 的 HTML 物件參考, 儲存在變數 codeSrc 備用. 它是 <textarea></textarea> 物件. myReload() 執行時就是要把它的 value 內容塞給 iframe 物件中的文件物件 (Document 物件, 用 document.write()).
    • 設定按鈕動作
      • 第16行取得 ID 是 pvBtn 的 HTML 物件 (它是一個按鈕) 並設定它的 click 動作為執行 myReload()
      • 第17行取得 ID 是 clrBtn 的 HTML 物件 (它是一個按鈕) 並設定它的 click 動作為執行 myClear()
    • 第18行 執行一次 myReload() 來載入網頁內容到 <iframe></ifram> 中.
  • 第20行 立即執行的程式碼設定了網頁內容載入完成後要執行函數 fnInit()

怎麼執行呢? 就用你慣用的瀏覽器 (IE 或者 FF 或者 Chrome...都可以) 來開它就可以了. 或者清楚一點說, 把第一份的 HTML 程式內容整個拷貝下來, 存成 .htm 檔, 再雙擊滑鼠直接打開它就是了, 不需要網頁伺服器.

上面的網頁在瀏覽器上載入後看起來應該是這樣子

Tryit Prototype


另外網路上有人寫了一個叫 Tryit Editor 的, 目前是 2.4 版, 網頁可以載入, 可以存檔, 可惜不支援 IE (因為 localStorage 屬性的相容性).

下載網址: http://sourceforge.net/projects/tryiteditor/files/tryiteditor24.1.zip/download

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()