2013/07/17

Browser當記事本,類Sublime Text風格

最近看到Will保哥的粉絲團有貼一則訊息是這樣的


那是覺得蠻新奇的,沒看過Chrome變成Sublime Text,學習學習XD
該方法是運用了Data URI scheme,該項技術大致上是用於降低HTTP request
不過瀏覽器沒辦法緩存該資料,尤其IE8以上的使用者又有被限制使用的容量

Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KB in Version 8.

  • Internet Explorer 9: Internet Explorer 9 does not have 32KB limitation and supports more elements.

今天主要還是來實做一下Fizer Khan這位國外網友所實做的Notepad


示範的瀏覽器是Chrome,先在瀏覽器的網址列輸入以下語法

data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>

送出後就會如照片一樣,還蠻神奇的




誰會想用瀏覽器當編輯器呢?大多數應該是Web developer吧XD



參考資料:
https://www.youtube.com/watch?feature=player_embedded&v=OpDD0lBTbP0
https://en.wikipedia.org/wiki/Data_URI_scheme
http://www.awooseo.com/tec-01-DataURIs.html
http://sjolzy.cn/What-is-the-data-URI-scheme-and-how-to-use-the-data-URI-scheme.html
http://www.hkpug.net/2009/04/21/%E5%88%A9%E7%94%A8-data-url-%E5%8A%A0%E9%80%9F%E4%BD%A0%E7%9A%84%E7%B6%B2%E9%A0%81/