JavaScript : 取得網頁的原始碼

 HTML5 FUN 烘焙機輸出語法時，可以選擇將遊戲的啟動網頁，以 Base64 編碼後，當成 iframe src 屬性的內容(勾選「是否要嵌入 ClassroomScreen」)，這樣子，iframe 會自動將編碼過的資料解碼後載入，好處是不用先為設計好的 HTML5 FUN 遊戲找網路空間存放，程序上會簡便些。不過，上週發現除了 HTML5 FUN speaking 因為需要使用麥克風被瀏覽器的安全管制限制，無法用以這個方式在 iframe 中使用以外，另一個 HTML5 English1200 則是需要使用到瀏覽器的 localStorage 來暫存資料，因為安全管制無法使用 localStorage，在瀏覽器的控制台中會看到類似這樣的錯誤訊息：

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Storage is disabled inside 'data:' URLs.

為了確認是不是 HTML5 FUN 程式的問題，我想用一個簡單的網頁來測試，網頁寫好了，怎樣將文字以 Base64 編碼我會，但是怎麼樣可以利用 JavaScript 來取得網頁的原始碼呢？

找了一下，原來可以用這樣的指令，取得目前頁面的原始碼：

new XMLSerializer().serializeToString(document)

不過，大概會遇到另一個被「過度」編碼的情形，一些特殊符號，像大於( > ) ，會變成「&gt;」，小於( < ) ，會變成「&lt;」。

怎麼辦呢？

我在 HTML5 FUN 烘焙機中是使用 textarea 來將編碼過的特殊符號解碼，使用這個自訂函數：

decodeHTML = function(html) {
  var txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
};

好的，那以 base64 編碼過的頁面，能不能在 iframe 中使用 localStorage 呢？看來，可能因為安全問題，無解了！

相關連結

• 雄:HTML5 FUN 精選集

• HTML5 FUN

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整