embed – My Program

由於 html5 起可以將 video, audio 等 tag, 將更方便把資料直接寫在 html code 中. 從這篇文章 “利用HTML5对文件进行base64转换” – http://www.pjhome.net/article/Javascript/file_to_base64_url.htm 的頁面工具上, 有個有趣的應用, 線上直接把檔案轉成 base64 的編碼, 方便寫入 html code 之中, 工具連結為: http://www.pjhome.net/web/html5/encodeDataUrl.htm

例如這張圖片:

利用該網頁產生的結果為:
data:image/gif;base64,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

改為 html 寫入則為:

<img src="data:image/gif;base64,R0lGODlhKAAkAHcAACwAAAAAKAAkAKf+/v7//pr/+pT+843//qv96YX+4Xz82Xb//rr//dP//sX9+uyq46L//6RmtOv//eGG13qU24vZrjLkyoB002Zkq+P//crz9PNUnNPy3qpnuPLixXA3lynC67zYqyfr3rSM2IJr0F3mynZWu0jlyntYwkvfvl7+8bvU5dXmwV3Z2tnx5bx4wvf//vOxp4jp6el+1XGcypfp9uj69uvbs0Hlw2ZDjMX1/PTfvjn56n//5ZPs1Zbb89n/5p3y4rTi9tr/8sOp2fl9yXGKyvjLy8vK6cfWqx3mykv/9KHR8sra6PLZszfduTLasTr//rPbvmXI5vrcuEuSyoq05v/p0Yqz5a3//Nyj4Zqc4JXy8uz06cn09/rzyFj42G3y5X7q2aH/8sxplWRcqm2KhWZxqdB0zWiwlku1ljhOs0MmdadXsVJEg7pZiLJWls3U0MgBNmcrliEsiCJfyVBnyFk6pSw9oDFqv10yjCz55adIoCherjheiV5PiUpAkHRtpW3l0I7l2YLdzZ7U3Jfe1r5goVzy3aTr44j16pHv3oF0i3z/3IMnaHI8aGwRTnorbGBCWl/16MTz6tL/7MD89OPA3MD49/X2+vs2bzX/9d767e0ZchPN09k5dqHN1vYndbQ/hxH/8rI0crBOf6/d6u4jVoRJX2Nsd1g3co3P8MwzWIQhap7P1W3ivlPixVXswEjavm2Zjmrkv0jTvXrgxnx7tdzn2HJkrd3pyV22jhh/u+l3vfSIzHzSphq0vG2PyV/PnQqrzl/CmyXCmR+wnmitoXyVrmPmtjjVtjvZsye/q3O+rXxdq+O+zL1WhoEviMGo1KOd15VIjquky6NtzWDGtoXFzI7byZO12/aUyO+d2fyuysBxlJq2r5qkqK6aqZByqL5nkb2Pr5C4tayNzIajvtRVlbZwgp+9urIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI/wABCBxIsKDBgwgTKlzIsCGABTMcSiS44o+JDRO+rHjVYqJEEwseWLDgxIIWalsGLtDyYcIEE1GyeATwZVKDADhxWtkhaxYJKj4gWUlAslWyQB5FWMjJNEECBQgOeTmCAxkvGhh3WJO4IAMBpjkF4PBAw8SEDCsEtpCEaYWyCw67EhBAl24AAUxItFjA94Ffv3jAUHEBt+GMQkjo5uhC1ciGBU4jS+4BRgQ3iTM2FGDioQmJHT5CKhhNurQOIFHOTaxRQ8QDolARyJ5NW7aOE0uIrE7hg4Dv38CD+y5wIphuiSlSZAhwsznz585vFgB1RsVEGk2Wg90OtsABMy8mSv+QcKKu+fPnvQ8LL3GDByAD4suXL+hbuUSG5BuIRXgiCQnwzSdfNRVk44AqjwAS3yq+lIGGNBJN8MsJBRSQwwAWDuDFKblkAoUDqYxRADAgFMHAHHD44dATHiBR4YsVItJIBZ0EMQQbxRSgBwMCdTCCJjc09IQEPRRgwJFIHlBKGho4YAs4vdSSBzQyANABBXGg0NAHS/SA5JcGiPBGGhjYsM0tx3xSAgNFYBECHVUy9IEEOhxg5wEG2GmAN5w444ANjIzhQhgclAABDHII4dAHrChyp51cuGIKFEoEgQ0tZIiyCSUc0DENBCPwsGgKBnTBhTEeCHMGLDZMcc0olU7a0UYzMQhhBwQgwFFGEQ1FIoERuJhBjDhEqGCOBhqwMMQQLOgSjRg/3PADKh3EUIUaWjI0iBtuqJBFJQKRggEGFSDrQAV97JJEtADIwAMPQhAy00BvhLIGBudiwIYYEDDAQAdJdFAFAyDcke1M3XiyjAMssNDGImpQAEEE/l6BRQQUcBDOvAKpQA4ZFTiwhiN1lBDCxBGAcKgcHOzBMUFbXGCJNhygEQIMEUQAAQVzlFDHJS8U9vJAzIwQAsUMXIElBSPwMTRCKDwTgRRS2BHGODEI/fTWXHe9dUAAOw==">

一樣可以輸出結果, 但是是利用 <img src=”….”> (…為上面的 base64 內容), 這樣一來就能將小型圖檔及小型媒體檔案一併寫入 html code 中, 效果其實有好有壞, 含入 html code 中, 可以減少 client 到 server 的多次 request, 但傳輸量相對比較大, 應用上要多評估, 不過上面文章應用的 html5 技術來做線上轉換, 是很有意思的一種應用!

繼續閱讀:
http://blog.donews.com/crackme/archive/2009/11/23/1573849.aspx
http://zetajames.wordpress.com/2010/01/08/lower-http-requests/
http://blog.darkthread.net/blogs/darkthreadtw/archive/2010/11/05/data-uri.aspx

[2010/12/30 10:37]
其實 Google 的圖片搜尋結果中的預覽圖, 若使用有支援 Data URI 的瀏覽器時, 就會使用這種方式來輸出預覽圖, 例如 IE8:

這個題目好難下. 主要是要說明, 在 Flash 中的 swf 程式內, 如何取得該 swf 嵌在哪個網頁(url), 以及被嵌入使用的 url (註1). 以下介紹的是在 AS3 下的作法.

(註1)的部分是指 <embed src=”XXXXXXX” /> 的其中 “XXXXXXX” 的部分.

程式碼並不複雜, 主要是利用了 ExternalInterface.call(“window.location.href.toString”); 來取得該 swf 嵌在哪個網頁(url).

而被嵌入的 url 則是利用了 loaderInfo 中的 loaderURL 取得, 程式碼如下:

import flash.external.*;

var strUrl:String;
var strQueryString:String;

strUrl = ExternalInterface.call("window.location.href.toString");

strQueryString = "";

var params:Array = strUrl.split('?');
if(params.length>1)
{
    strQueryString = params[1];
}

var strEQueryString:String;
strEQueryString ="";
for (var s1:String in this.loaderInfo.parameters) {

  strEQueryString += s1 + "=" + this.loaderInfo.parameters[s1] + ";";
}
 
 
output_txt.text = 
  "Result:\n"+
  "location="+strUrl+"\n"+"querystring="+strQueryString+"\n"+
  "embed-url="+this.loaderInfo.loaderURL+"\n"+
  "embed-querystring="+strEQueryString+"\n";

取得第一個部分, 是取出整個 url 後, 再自行解析 (parse) 出 querystring 內容. 而在第二個部分, 因為是使用 loaderInfo, 所以 querystring 的參數可以直接使用 parameters 來取得.

sample link : http://sample.diary.tw/21/sample.htm?q1=123&q2=456&q3=789

其中 embed 的內容為: location.swf?eq1=abc&eq2=def 所以出現的結果如下:

參考資料:
http://ccutmis2.spaces.live.com/Blog/cns!F858878FA572B430!1016.entry
http://mc-computing.com/Languages/ActionScript/Getting_html_data.html

2024 年 11 月
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30