How To Make Bookmarklet Applications

“Bookmarklet型(云端)应用的前端架构”
@D2 Hangzhou 2010

Transcript

1. BOOKMARKLET ྘ (ᄉ؊)ႋႨ֥భ؊ࡏܒ อ࿟ · ౹ӑ QuChao.com 1 Wednesday, December 22, 2010 1. ჰีᇏႵ“ᄉ؊”ؽሳ൞ၹູᆜ۱ٚσิ৿ሱ QQ ᄉൻೆمđ֌ࡼభ؊ބᄉ࠹ෘ఼ྛϾקཁ֤ఠ఼đၛu Bookmarklet ྘ႋႨ֥భ؊ࢳथٚσvູีࡼ۷ༀൌđ္ି۷์్ۀওٳཚଽಸĠ 2. ٳཚ֥ჰၹğ၂൞భ؊࠯ඌЧট໭മЌૡđؽটᄵ༐ຬյᄯ۷ष٢ބٳཚ֥อ࿟b
2. • щཿ௴ђൡႨ֥ Bookmarklet • ࿐߶ࡨഒ౓ೆѩᇍ৘໪ಙ • ࠺֤ൈख़ᅧ॥ DOM ֥э߄ CONTENTS 15min 10min 10min 2 Wednesday, December 22, 2010 Чࢽ D2 ൮ՑҐႨٳ߶ӆྙൔđਙԛն۔ބყܙൈࡗࡼٚьնࡅႵ࿊ᄴྟֹ൬๐ଽಸb
3. ABOUT ME ౹`ӑ - Chappell QU భ؊षؿ۽ӱഽ อ࿟ · ም૫Ӂ௖҆ · ު෻ᇏྏ`` Chappell.Wat@Gmail.com http://QuChao.com 3 Wednesday, December 22, 2010 ም૫Ӂ௖ Web ߄đࡼӮູв҆૊֥࿹ؿٚཟᆭ၂đၧ߶൞ြࢸ֥ྍ౴൝b
4. ၂aщཿ௴ђൡႨ֥BOOKMARKLET 4 Wednesday, December 22, 2010
5. BOOKMARKLET ູ࣮ࣨޅ໾Ĥ Bookmarklet = Bookmark + Applet ᇏ໓଀ğཬ඀ద Favlet = Favorite + Applet Applet ඀ద 5 Wednesday, December 22, 2010 1. Bookmarklet ൞ކӮՍđՍჷ൞ Bookmark č඀దĎބ applet čJava ཬӱ྽ĎĠ 2. Favlet ൞ਸ਼၂۱ݨ࡮љӫđఃᇏՍჷ Favorite ൞ IE ൬ҟࡃ֥ႇ໓଀Ġ 3. ၛഈሧਘটሱ wikipedia (http://zh.wikipedia.org/zh-cn/Bookmarklet)Ġ
6. BOOKMARKLET ູ࣮ࣨޅ໾Ĥ Bookmarklet = Bookmark + Applet “ `ॖၛФ൬ҟ֥đ ႨႿᄝຩ်ᇏ ൌགྷଖᇕห൹ۿି֥ ৽ࢤ ” 6 Wednesday, December 22, 2010 1. bookmarklets.com ൮ՑᇿҨႿ 1998 ୍đط 2001 ୍ favlet ၂ՍҌФ Tantek Çelik ൮Ց൐ႨđၹՎॖၛಒಪ bookmarklet Ҍ൞ቋᆞ ൔa๙Ⴈ֥଀ሳĠ 2. ၛഈሧਘটሱ wikipedia Ġ 3. ॖ۴ऌ଀ሳ֥ܒӮđ۳෱༯۱ࡥֆ֥קၬb
7. BOOKMARKLET ೂޅؿߨቔႨĤ javascript ເླྀၰ: ФᄎྛൈࡼӁള၂۱ྍ໓֖đ ໓֖ଽಸ൞ս઒෮ْ֥߭ᆴĠ ֌ْ֒߭ᆴູ undefinded ൈđ ࡼ҂Ӂളྍ໓֖b void ᄎෘژ: ൓ᇔْ߭ undefinded b ၹՎࡼх૧Ӂളྍ໓֖b javascript: void(0); javascript: <a href=” ”>…</a> void 7 Wednesday, December 22, 2010 1. ၛ၂۱ቋࡥֆ֥ bookmarklet ູ২Ġ 2. ᇿၩğھ২Фಪູ൞҂ݺ֥ൌ࡬đᄝ IE6 ༯߶ᄯӮ onclick ओѣാིđ֌ეओЧദી໙ีb
8. BOOKMARKLET ೂޅؿߨቔႨĤ javascript:(function(){ /* blah blah */ })(); 8 Wednesday, December 22, 2010 گᄖ֥ bookmarklet ႋႨ๙ӈҐႨେ଀ݦඔটЇݕս઒đིݔაభ်ൕ২ཌྷ๝đْ߭ undefinded đၹՎन҂߶Ӂളྍ໓֖b
9. گᄖ֥ BOOKMARKLET ᄸહཿĤ javascript: (function (F, i, r, e, b, u, g, L, I, T, E) { if (F.getElementById(b)) return; E = F[i + 'NS'] && F.documentElement.namespaceURI; E = E ? F[i + 'NS'](E, 'script') : F[i]('script'); E[r]('id', b); E[r]('src', I + g + T); E[r](b, u); (F[e]('head')[0] || F[e]('body')[0]).appendChild(E); E = new Image; E[r]('src', I + L); })(document, 'createElement', 'setAttribute', 'getElementsByTagName', 'FirebugLite', '4', 'firebug- lite.js', 'releases/lite/latest/skin/xp/sprite.png', 'https://getfirebug.com/', '#startOpened'); 9 Wednesday, December 22, 2010 1. ෛၩ࿊౼ࠫॻ҂๝ো྘౏ۿିࢠູگᄖ֥ Bookmarklet ႋႨቔູщཿൕ২Ġ 2. ᇷ଀֥ Firebug Lite (http://getfirebug.com/firebuglite)Ġ 3. ᇿၩπޣ೤֥҆ٳđ൫๭ᄛೆ၂۱ຓ֥҆࢖Ч֞໓֖৚b
10. گᄖ֥ BOOKMARKLET ᄸહཿĤ javascript: function fnStartDesign(sUrl) { var nScript = document.createElement('script'); nScript.setAttribute('language', 'JavaScript'); nScript.setAttribute('src', sUrl); document.body.appendChild(nScript); } fnStartDesign('http://www.sprymedia.co.uk/design/\ design/media/js/design-loader.js'); 10 Wednesday, December 22, 2010 1. ᆃ൞၂ॻ଀ູ Design ֥ Bookmarklet (http://www.sprymedia.co.uk/article/Design)Ġ 2. ޣ೤֥҆ٳ๝ဢᄝᄛೆຓ҆࢖Чb
11. javascript: void((function () { var element = document.createElement('script'); element.setAttribute('src', 'http://dict.cn/hc/init.php'); document.body.appendChild(element); })()) گᄖ֥ BOOKMARKLET ᄸહཿĤ 11 Wednesday, December 22, 2010 1. ᆃ൞ Dict.cn ߃Սෆ෬֥ Bookmarklet ս઒ (http://dict.cn/foot/help.htm)Ġ 2. Ӈ൫ᄛೆຓ҆࢖Чb
12. گᄖ֥ BOOKMARKLET ᄸહཿĤ javascript: (function (q) { !! q ? q.toggle() : (function (d, j) { j = d.createElement('script'); j.src = '//ime.qq.com/fcgi-bin/getjs'; j.setAttribute('ime-cfg', 'lt=2'); d.getElementsByTagName('head')[0].appendChild(j) })(document) })(window.QQWebIME) 12 Wednesday, December 22, 2010 1. ᆃ൞ QQ ᄉൻೆم֥ Bookmarklet ս઒ (http://py.qq.com/web)Ġ 2. ၇ࣸᄝᄛೆຓ҆࢖Чb
13. ູ൉હնࡅ׻མᄛೆຓ҆࢖ЧĤ 13 Wednesday, December 22, 2010
14. • ః၂đຓ҆࢖ЧьႿषؿᆀ ࣉྛϱЧ֥๤၂۷ྍđᄜ஥ ކ CGI ࡼֹᆶ 301/302 ᇗק ཟ֥ٚൔ఼ྛປӮྍϱЧ֥ ๷ෂđЌᆣग़޼؊൓ᇔ٠໙ ቋྍϱЧĠ • ଴҂ӮđߎႵః෱֥ჰၹĤ ູ൉હնࡅ׻མᄛೆຓ҆࢖ЧĤ Bookmarklet CGI ᄛೆ ᆳྛ ቋྍ࢖Ч໓ࡱ ᇗקཟ ࡆൈࡗՄ CDN ᄎྛ ๤࠹ etc. ဵ ൞֥b 14 Wednesday, December 22, 2010 1. ֻ၂۱ჰၹ൞ࡆ఼ؓग़޼؊ϱЧ֥॥ᇅĠ 2. ০Ⴈ CGI ॖၛᄝᇗקཟᆭభൌགྷᇭ؟ြༀઆࠠđೂ๤࠹aളӮ sessionđമᇀ൞࿢৯नޙĠ 3. Վ်ࡼӇ൫ࢳ൤ֻؽ۱৘Ⴎb
15. BOOKMARKLET ֥Ӊ؇ཋᇅ ഈཋᆴ = ӑ৽ࢤ href උྟ֥Ӊ؇ഈཋ ᛍফఖֹᆶণ֥Ӊ؇ഈཋ ൬ҟཛॖЌթ֥Ӊ؇ഈཋ Math.min( ); , , var 2,083 >100k >100k >100k >100k 508 >100k >100k 34,464 65,530 2,083 65,536 >100k 2,347 >100k 6 15 Wednesday, December 22, 2010 1. ࡆᄛຓ҆࢖Ч֥ਸ਼၂۱ჰၹ൞ğᛍফఖؓ bookmarklet ֥Ӊ؇ႵཋᇅĠ 2. ཋᇅ֥೘۱ົ؇ğ৽ࢤaֹᆶণބ൬ҟཛ֥Ӊ؇ཋᇅb Bookmarklet ֥Ӊ؇ཋᇅႋ౼೘ᆀቋཬĠ 3. ఃᇏ IE6 ֹ֥ᆶণӉ؇ഈཋູ 508 bytesđູଢభቋཬᆴĠ 4. ႮႿ௉ږܱ༢đᆃ৚ᆺਙԛᇶေᛍফఖĠབྷі܋Їݣ೘նႄౣ֥ 20 ؟۱ϱЧ֥ᛍফఖҩ൫ࢲݔđЧᇛଽࡼᆜ৘൤ԛđ౨ܱᇿ вದѰग़Ġ
16. 2,083 >100k >100k >100k >100k 508 >100k >100k 34,464 65,530 2,083 65,536 >100k 2,347 >100k BOOKMARKLET ֥Ӊ؇ཋᇅ ӑ৽ࢤ href උྟ֥Ӊ؇ഈཋ ᛍফఖֹᆶণ֥Ӊ؇ഈཋ ൬ҟཛॖЌթ֥Ӊ؇ഈཋ ຩ઎൬ҟࡃ֥Ӊ؇ഈཋ 255 4096 16 Wednesday, December 22, 2010 1. ႮႿޓ؟ᛍফఖၘႵ“൬ҟࡃ๝҄”ۿିđၹՎഈཋᇅߎა“๝҄ު֥൬ҟཛ”ႵܱĠ 2. ఃᇏ TT4 ᛍফఖႮႿձ஥ࢠᄪϱЧ֥߶ჴ൬ҟࡃđࡼčຩ઎Ď൬ҟཛӉ؇ཋᇅᄝ 255 bytes đྍϱ QQBrowser ၘࡼཋᇅิശ ᇀ 4096 bytes b
17. BOOKMARKLET ֥Ӊ؇ཋᇅ ഈཋᆴ = 255 17 Wednesday, December 22, 2010 ೂݔေॉ੮ TT4 đᄵӉ؇ഈཋູ 255 bytes b
18. javascript: (function (q) { !! q ? q.toggle() : (function (d, j) { j = d.createElement('script'); j.src = '//ime.qq.com/fcgi-bin/getjs'; j.setAttribute('ime-cfg', 'lt=2'); d.getElementsByTagName('head')[0].appendChild(j) })(document) })(window.QQWebIME) BOOKMARKLET ֥wቋࡄൌ࡬x์ൖ 1.০Ⴈ CGI ᄛೆൌ࠽࢖Чđ࠻ିࡨഒ඀దЧദս઒đႻॖၛࡆ఼ᅧ॥Ġ 2.ࠃႨݦඔ֥ൌҕބྙҕđႵིࡨഒэਈലૼ෮ջট֥ս઒ᅝႨĠ 3.ᄹࡆԚ൓߄஑؎đх૧Ⴈ޼ᇗگᆳྛࣉطࡆᄛ࢖ЧĠ 4.ഡᇂҕඔ஥ᇂཛđٚьႨ޼ؓۿିࣉྛሱקၬĠ 5.ః෱…… 1 3 2 4 18 Wednesday, December 22, 2010 ၛ QQ ᄉൻೆم֥ Bookmarklet ս઒ູ২ğ 1. భ໓Ⴕඍđॖཟग़޼؊఼ྛ๷ෂቋྍϱЧb൐Ⴈ // ط҂ཿऎุླྀၰđࡼႮᛍফఖ۴ऌଢѓ်૫طሱྛ࿊ᄴླྀၰđᆃဢ൐Ⴈ֥ భิ൞Ⴕ҆ඇ https ڛༀĠ 2. 255 ሳࢫഈཋ֥ࠞ؊౦ঃ༯֥٤ӈ࿊ᄴĠ 3. х૧ᇗگࡆᄛ࢖Чđڿູᆳྛӱ྽षఓ/ܱо֥ြༀઆࠠĠ 4. ০Ⴈࢫׄඋྟটܥ߄ҕඔđᄜႮ࢖Чಀ౼֤đࣉطԩ৘Ġ 5. ຬა໡၂ఏࢌੀaҀԉ……
19. ؽa࿐߶ࡨഒ౓ೆѩᇍ৘໪ಙ 19 Wednesday, December 22, 2010
20. •၇ঠଢѓ်૫طթᄝĠ •܋ཚሢ๝၂۱ DOMĠ •ࢱᮕb w౨۳໡ᆃဢቓ֥৘Ⴎx 20 Wednesday, December 22, 2010 1. ႮЧো྘Ӂ௖֥หᆘ෮थקğ໡ૌ֥ႋႨิ܂ۿିđଢѓ်૫ิ܂ႋႨӆࣟbႱೂ༙୤ބ୔֥ܱ༢ğ༙୤୔ູ༙୤ิ܂ਔࡲ ूЌᅰđط༙୤ग़ܴഈູ༙୤୔ิ܂ਔൊ໾Ġ 2. Ⴕೂದো܋๝ႚႵֹ౯đ໡ૌ֥ႋႨބଢѓ်૫܋ཚ๝၂۱ DOM đ೿ր DOM ࡼႵၭႿۿିؿߨĠ 3. Ⴊྮ֥षؿᆀն؟ؓս઒ೂߑ“ࢱᮕ”b
21. • ࣐ਈ҂ေႄೆӈ࡮ো९đ х૧ၹϱЧ҂๝طᄯӮ֥໙ีĠ • ܵ৘ݺሱ࠭׿ห֥ଁ଀ॢࡗđ ࣇิ܂Ⴈ޼෮ླ֥܄܋ٚمĠ • ҂ေྩڿؓའჰ྘đ ๝ൈᇿၩଢѓ်૫൞ڎྩڿჰ྘Ġ • Ԣ٤Ⴈ޼ᆇ֥ᆩ֡ؿളਔ൉હđ ڎᄵ҂ေቅᆸ൙ࡱવஞބଏಪྛູĠ • ֩֩…… ࡨഒ JAVASCRIPT Ҫ૫֥ཌྷ޺ೆ౓ 21 Wednesday, December 22, 2010 Ֆ Javascript Ҫࡥေฐษೂޅࡨഒཌྷ޺ೆ౓ğ 1. бೂޓ؟భ؊ো९׻൐Ⴈ $() ቔູ࿊ᄴఖݦඔđڭۂھݦඔॖିᄯӮჰ်૫ۿିാིđ QQ ᄉൻೆمଢభ൐Ⴈჰളս઒щ ཿĠ 2. QQ ᄉൻೆمଢభࣇ൐Ⴈ QQWebIME ᆃ۱ଁ଀ॢࡗĠ 3. ђ৥ؓའඋྟൈႋေཬྏĠ 4. ၛ WebQQ ބ QQ ᄉൻೆم֥ކቔູ২ğ֒Ⴈ޼ీࠌ߭Ӛൈсྶ༵୫ౢ൞০Ⴈ QQ ᄉൻೆمটൻೆ௓ၻԱߎ൞ WebQQ ৚ؿ ෂཨ༏đೂݔ൞భᆀđᄵॖၛቅᆸવஞၛٝᆸ௓ၻԱФิࢌĠ
22. ٚσA ٚσB ٚσC ٚم Ⴊׄ ಌׄ Ԯ๤ HTML iframe Flash/SilverLight/... ӮЧ֮đ ၞႿൌགྷ ໓֖׿৫đ ໭ླᇗᇂඋྟ UI Ⴎྴ୅ࠏ߻ᇅđ ࠫެ҂൳်૫႕ཙ ླေᇗᇂնਈ CSS උྟ ҂ൡކࢸ૫Ԅժэ߄ ݖႿ௔َ֥ླ౰ ؓᄎྛߌ࣢ေ౰ۚđ ა JS ࢌ޺഍ཁگᄖ ࢆ֮ CSS/HTML Ҫ૫֥ཌྷ޺໪ಙ ః෱๝োӁ௖ 22 Wednesday, December 22, 2010 ೘۱ಸၞФམ֥֞ࢸ૫ٚσğ A. ೂݔଢѓ်૫קၬਔྸ؟ѓదဢൔđᄵླေࣉྛնਈ CSS ᇗᇂҠቔ Ġ B. ༢ QQ ᄉൻೆمყ࿹ൈ෮ҐႨ֥ٚσb൮༵҂ൡކࢸ૫֥Ԅժэ߄ݖႿ௔َ֥ླ౰đఃՑ๩ૼМ֥ࣟ iframe ᄝଖུࣸϱ Firefox ༯֥຀ሄ߶ؿളၳӈ׵׮đၹՎ٢ఙĠ C. ླေބ Javascript ௔َࢌ޺đު௹֥ྩڿބົ޹ӮЧࢠۚĠ ೘ᇕٚσ׻Ⴕ҂๝ӱ؇ॖྛྟb
23. ٚσA+ ሱקၬ HTML ѓద ໭ླᇗᇂնਈ CSS උྟ ໭مх૧ ࠞ؊౦ঃ QQᄉൻೆم֥ࢸ૫ൌགྷ <style> qqwebime { color: blue; } </style> <qqwebime>QQᄉൻೆم</qqwebime> <script> isIE && doc.createElement(‘qqwebime’); </script> ref: http://ejohn.org/blog/html5-shiv/ 23 Wednesday, December 22, 2010 1. QQ ᄉൻೆمҐႨ“ሱקၬѓద”֥ٚمটࢳथ“ٚσ A ”ླေ“նਈᇗᇂ CSS ”֥ಌׄđࢳथधն؟ඔ֥໙ีđ֌၇ࣸ໭مԩ৘ * {} ࠇ :first-child{} ֩٤ӈ࡮ܿᄵĠ 2. ٚσؿགྷሱ jQuery ቔᆀ Jesig ֥Ѱग़ (http://ejohn.org/blog/html5-shiv/) b 3. ۋ྆อ࿟ ISD ᇗܒቆ֥ Damao ๝࿐ؓՎ໓ᅣ֥๷ࡩb
24. ೘a࠺֤ൈख़ᅧ॥ DOM ֥э߄ 24 Wednesday, December 22, 2010
25. ູޅေࡓ॥DOM֥э߄Ĥ ࡓ॥ DOM э߄ ॴთ໓֖Ԣຓ ࡓ॥ iframe ֥э߄ ऎุ ൐ۿିڭۂ w෮Ⴕxሰ໓֖ ଢ֥ ࠻Ⴕ iframe ֥໓֖ᇗᄛ ྍ iframe ֥ၳ҄ളӮ 25 Wednesday, December 22, 2010 1. ࡓ॥֥ჰၹğႮႿ iframe ଽಸॴ໓֖đၹՎླေ໡ૌࣉྛჍၛࡓ॥ބԩ৘Ġ 2. ࡓ॥֥ؓའğሰ໓֖đࠧ iframe ჭ෍Ġ 3. ቋᇔ֥ଢ֥ğ൐໡ૌ֥Ӂ௖ۿିڭۂ֞ଢѓ်૫֥෮Ⴕሰ်૫Ġ 5. ॴთ໓֖Ԣຓb
26. ೂޅൌീࡓ॥ĤPT.A ؓႿᄝࡓ॥ᆭభФҬೆ DOM ֥ሰ໓֖ğ 1.ࠆ౼෮Ⴕሰ໓֖đђ৥ѩ஑؎൞ڎႵಃཋ٠໙đ೏ ીႵಃཋđᄵ๋ݖĠ 2.ೂႵಃཋđᄵࡓ๐ః load ൙ࡱđѩᄝओѣݦඔᇏᇗ گ҄ᇧ၂đၛ۵ሶሰ໓֖ᇗᄛࠇ๋ሇު֥э߄Ġ 3.࠿࿃ᄝఃଽ҆࿙ᅳሰ໓֖đѩᇗگཌྷ๝֥Ҡቔb 26 Wednesday, December 22, 2010 නਫ਼ğႮഈສ༯ђ৥ᆜ۱ DOM ඎđࡓ॥෮Ⴕ໡ૌႵಃ٠໙֥ሰ໓֖đ൮༵ಞۿିڭۂ֞෰ૌđᄜ൐໡ૌႵି৯ࡼۿିڭۂ֞෰ ૌ֥ሰ໓֖bč٤଴ׄđս઒੻Ď
27. ೂޅൌീࡓ॥ĤPT.B ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ 1.࣐ਈҐ౼Ф׮ٚمđࠧ๙ݖ൙ࡱࠇః෱ࠏᇅಞᛍফ ఖ๙ᆩ໡ૌ DOM ֥э߄ࢲݔĠ 2.ೂݔФ׮ٚم໭ིđҐ౼ᇶ׮࡟Ұ DOM ൞ڎэ߄ ֥ٚൔĠ 3.؟ᇕٚمѩթൈđིੱႪ༵b 27 Wednesday, December 22, 2010 නਫ਼ğ ০Ⴈ൙ࡱ๙ᆩč֩োරٚمĎࠇקൈᇶ׮࡟Ұ֥ٚمট࡟Ұ DOM ൞ڎФҬೆሰ໓֖đᅳ֞Фၳ҄Ҭೆ֥ྍ֥ሰ໓֖ު ᄜࣉྛభ၂်֥ٚمࣉྛࡓ॥ԩ৘b
28. ೂޅൌീࡓ॥ĤPT.C ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ Mutation Events ᇏ֥ DOMNodeInserted ൙ࡱđ ֒Фࡓ๐֥ࢫׄᇏႵྍࢫׄФҬೆൈԨؿĠ •ᆜ۱ Mutation Events ᄝ DOM Level 2 Core ֥ܿٓᇏႵ བྷ༥࠺ඍĠ (ref: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) •࡙ಸྟğ 1~4 3~5 9-11 1~9 9 28 Wednesday, December 22, 2010 1. ቋႪ֥ٚم൞০Ⴈ Mutation Events bھ༢ਙ֥ᇭ؟൙ࡱनॖđೂ DOMNodeInsertedIntoDocument ࠇ DOMSubtreeModifiedđ֌ ቋൡކ౏࡙ಸྟቋܼ֥֒උ DOMNodeInserted ᆃ۱൙ࡱĠ 2. Mutation Events ᄝ DOM Level 2 ނྏܿٓ (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) ᇏႵ૭ ඍĠ 3.ଢభđࠫެ෮Ⴕགྷսᛍফఖ׻ᆦӻਔ DOM Level2 đఃᇏ္Їওې࿆҃ᆦӻ LV3 ֥ IE9B bࢤ༯টࢳथഺ༯֥ IE 6/7/8 b
29. ೂޅൌീࡓ॥ĤPT.C ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ Mutation Events ᇏ֥ DOMNodeInserted ൙ࡱđ ֒Фࡓ๐֥ࢫׄᇏႵྍࢫׄФҬೆൈԨؿĠ •ᆜ۱ Mutation Events ᄝDOM Level 2 Core ֥ܿٓᇏႵ བྷ༥࠺ඍĠ (via http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) •࡙ಸྟğ 1~4 3~5 9/10 1~9 9 document.addEventListener( 'DOMNodeInserted', // ൙ࡱ଀ function (evt) { // ओѣ // ֤֞ଢѓჭ෍ var curTarget = evt.target; // ᆺࡓ๐ iframe ჭ෍ if (1 !== curTar.nodeType || ‘iframe’ !== curTar.nodeName) return; // Ⴕྍ iframe ФҬೆ֞ DOMđବೆࡓ॥ }, false ); 29 Wednesday, December 22, 2010 ս઒ൕ২b
30. ೂޅൌീࡓ॥ĤPT.D ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ IE หႵ֥ CSS Expression টൌགྷؓหקჭ෍֥ࡓ ๐Ġ •ྟି໙ี֥ࢳथğ஥ކ Behavior උྟ൐ Expression ᆺ ᆳྛ၂Ցb (ref: http://dean.edwards.name/weblog/2005/06/base64-sexy/) •࡙ಸྟğ 6/7 30 Wednesday, December 22, 2010 ഈּູ୆ܱоਔ၂ഁ૊đࣼ၂ק߶ູ୆յष၂ഁԳğ 1. ೂݔնࡅି߭མఏ϶๩ૼ PNG ᄝ IE6 ༯֥ଖ۱ࢳथٚσ (http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/)đ ႋھࣼିམఏᆃ۱ IE ׿ႵđېݺॖၛႨট๙ᆩ໡ૌࢫׄФҬೆ֥ CSS หྟˢˢ Expression bරެᆃ۱උྟ฿ളࣼ൞টྩگ IE bug ֥Ġ 2. Expression ֥ྟି໙ีᄝޓ؟భ؊࢝॓඀ᆭো໓ᅣ৚Фܼٗิࠣđ֌ն؟ጪѨః“҂؎ᆳྛ”֥໙ีbᇷ଀֥భ؊ն୤ Dean Edwards ᄪᄝ 05 ୍ࣼิԛ၂۱ಞ෱ᆺᆳྛ၂Ց֥ٚم (http://dean.edwards.name/weblog/2005/06/base64-sexy/) đ໡ૌॖၛ০Ⴈᆃ ۱ٚمಀࢳथࣂ฿໡ૌმ֥֞໙ีĠ
31. ೂޅൌീࡓ॥ĤPT.D ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ IE หႵ֥ CSS Expression টൌགྷؓหקჭ෍֥ࡓ ๐Ġ •ྟି໙ี֥ࢳथğ஥ކ Behavior උྟ൐ Expression ᆺ ᆳྛ၂Ցb (via http://dean.edwards.name/weblog/2005/06/base64-sexy/) •࡙ಸྟğ 6/7 <style> iframe { behavior:expression(iframeInserted(this)); } </style> <script> function iframeInserted(node) { // ഡᇂଽ৳ဢൔđႪ༵ࠩۚđ൐ᆭؓ๝၂ჭ෍ᆺᆳྛ၂Ց node.style.behavior = 'none'; // Ⴕྍ iframe ФҬೆ֞ DOMđବೆࡓ॥ } </script> 31 Wednesday, December 22, 2010 ս઒ൕ২b
32. ೂޅൌീࡓ॥ĤPT.E ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ IE8 ѓሙଆൔ৚ؓའჰ྘֥ Accessor (getter/setter) උྟྩڿمটྩڿ innerHTML උྟđѩ০Ⴈؓ appendChild ٚم֥ჰ྘ྩڿটൌགྷؓྍᄹჭ෍֥๙ᆩĠ •ܱႿ IE8 ৚ؓའჰ྘֥ Accessor (getter/setter) උྟđ౨ Ұᄇ MSDNb (ref: http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) •࡙ಸྟğ 8std 32 Wednesday, December 22, 2010 1. ೂݔնࡅؓೂޅᄝ٤ IE ഈൌགྷ outerHTML ֥ٚمႵႆའđପહႋھؓ DOM ֥ Accessor (getter/setter) Ⴕ၂קਔࢳbҰᄇ MSDN ު֤ᆩđIE8 ֥ѓሙଆൔၘࣜჍၛᆦӻđႨՎمॖၛࢳथؓ innerHTML ֥ࡓ๐Ġطᆰࢤྩڿ appendChild ֩ٚمჰ྘ࠧॖ ൌགྷ๝ဢ֥ࡓ๐Ġ 2. ᄝ MSDN ᇏିᅳ֞ཌྷܱሧਘ (http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx)
33. ೂޅൌീࡓ॥ĤPT.E ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ IE8 ѓሙଆൔ৚ؓའჰ྘֥ Accessor (getter/setter) උྟྩڿمটྩڿ innerHTML උྟđѩ০Ⴈؓ appendChild ٚم֥ჰ྘ྩڿটൌགྷؓྍᄹჭ෍֥๙ ᆩĠ •ܱႿ IE8 ৚ؓའჰ྘֥ Accessor (getter/setter) උྟđ ౨Ұᄇ MSDNb (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) •࡙ಸྟğ 8std // Ќթჰ൓֥ innerHTML උྟ૭ඍఖ var propDscrptr = Object.getOwnPropertyDescriptor (Element.prototype, ‘innerHTML’); // ሱקၬ၂۱ྍ֥ innerHTML උྟ Object.defineProperty(Element.prototype, ‘innerHTML’, { // ᆺᇗקၬ setter set: function (html) { // ᆳྛჰ൓֥ innerHTML set ٚم propDscrptr.set.call(this, html); // Ⴕྍ iframe ФҬೆ֞ DOMđବೆࡓ॥ } }); 33 Wednesday, December 22, 2010 ᆃ৚ࣇႨ innerHTML ᆃ۱ቋӈႨ֥උྟটई২đൌ࠽ս઒ᇏླေ hack ۷؟උྟđбೂ outerHTML ֩b
34. ೂޅൌീࡓ॥ĤPT.E ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •০Ⴈ IE8 ѓሙଆൔ৚ؓའჰ྘֥ Accessor (getter/setter) උྟྩڿمটྩڿ innerHTML උྟđѩ০Ⴈؓ appendChild ٚم֥ჰ྘ྩڿটൌགྷؓྍᄹჭ෍֥๙ ᆩĠ •ܱႿ IE8 ৚ؓའჰ྘֥ Accessor (getter/setter) උྟđ ౨Ұᄇ MSDNb (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) •࡙ಸྟğ 8std // Ќթჰ൓֥ appendChild ٚم var methodProto = Element.prototype[‘appendChild’]; // ሱקၬ၂۱ྍ֥ appendChild ٚم Element.prototype[‘appendChild’] = function () { // ᆳྛჰ൓֥ appendChild ٚم var res = methodProto.apply(this, arguments); // Ⴕྍ iframe ФҬೆ֞ DOMđବೆࡓ॥ return result; }; 34 Wednesday, December 22, 2010 ᆃ৚ࣇႨ appendChild ᆃ۱ቋӈႨٚمটई২đൌ࠽ս઒ᇏླေ hack ۷؟ٚمđбೂ insertBefore ֩b
35. ೂޅൌീࡓ॥ĤPT.F ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •ೂݔഈඍФ׮๙ᆩٚم׻҂ᆦӻđॖၛҐႨᇶ׮࡟ҩ مĠ •൐Ⴈקൈఖ҂؎ࡓ๐ iframe ჭ෍֥ඔਈđѩؓၘࡓ॥ ֥ iframe յഈ flag đؿളэ߄ൈ࡟Ұ൞ڎթᄝ flag đ ೂໃթᄝđᄵ൪ູྍⳢ iframeĠ •࡙ಸྟğఃჅ֥ᛍফఖ 35 Wednesday, December 22, 2010 1. ෮Ⴕ A ࠩᛍফఖ׻ॖၛႨᆭభ֥ٚσࣉྛ࡙ಸđമᇀЇও iOS ބ Android ֩၍׮ഡСᛍফఖbೂݔླေሼ֞ fallback ᆃ၂҄đ ໡۱ದत֤֚҂ೂ҂ቓ࡙ಸਔĠ 2. ၛഈ಩ޅٚمؓॴთ໓֖न໭ིb
36. ޺׮ࢌੀൈࡗ อ࿟ · ౹ӑ http://QuChao.com Chappell.Wat@Gmail.com 36 Wednesday, December 22, 2010
37. ྆྆նࡅ Dec 18th, 2010 37 Wednesday, December 22, 2010