Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How To Make Bookmarklet Applications
Search
Chao QU
December 18, 2010
Programming
4
800
How To Make Bookmarklet Applications
“Bookmarklet型(云端)应用的前端架构”
@D2 Hangzhou 2010
Chao QU
December 18, 2010
Tweet
Share
More Decks by Chao QU
See All by Chao QU
The Mashups with the Inter-application Communication Enabled
quchao
5
710
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
CursorはMCPを使った方が良いぞ
taigakono
1
180
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
290
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Is Xcode slowly dying out in 2025?
uetyo
1
190
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
ニーリーにおけるプロダクトエンジニア
nealle
0
490
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Speed Design
sergeychernyshev
32
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
A Tale of Four Properties
chriscoyier
160
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Become a Pro
speakerdeck
PRO
28
5.4k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
BOOKMARKLET (ᄉ؊)ႋႨ֥భ؊ࡏܒ อ · ౹ӑ QuChao.com 1 Wednesday, December
22, 2010 1. ჰีᇏႵ“ᄉ؊”ؽሳ൞ၹູᆜ۱ٚσิሱ QQ ᄉൻೆمđࡼభ؊ބᄉ࠹ෘ఼ྛϾקཁ֤ఠ఼đၛu Bookmarklet ႋႨ֥భ؊ࢳथٚσvູีࡼ۷ༀൌđ္ି۷์్ۀওٳཚଽಸĠ 2. ٳཚ֥ჰၹğ၂൞భ؊ඌЧটമЌૡđؽটᄵ༐ຬյᄯ۷ष٢ބٳཚ֥อb
• щཿ௴ђൡႨ֥ Bookmarklet • ࿐߶ࡨഒೆѩᇍಙ • ࠺֤ൈख़ᅧ॥ DOM ֥э߄ CONTENTS
15min 10min 10min 2 Wednesday, December 22, 2010 Чࢽ D2 ൮ՑҐႨٳ߶ӆྙൔđਙԛն۔ބყܙൈࡗࡼٚьնࡅႵ࿊ᄴྟֹ൬๐ଽಸb
ABOUT ME ౹`ӑ - Chappell QU భ؊षؿ۽ӱഽ อ · ም૫Ӂ҆
· ުᇏྏ``
[email protected]
http://QuChao.com 3 Wednesday, December 22, 2010 ም૫Ӂ Web ߄đࡼӮູв֥҆ؿٚཟᆭ၂đၧ߶൞ြࢸ֥ྍ൝b
၂aщཿ௴ђൡႨ֥BOOKMARKLET 4 Wednesday, December 22, 2010
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)Ġ
BOOKMARKLET ູ࣮ࣨޅĤ Bookmarklet = Bookmark + Applet “ `ॖၛФ൬ҟ֥đ ႨႿᄝຩ်ᇏ
ൌགྷଖᇕห൹ۿି֥ ৽ࢤ ” 6 Wednesday, December 22, 2010 1. bookmarklets.com ൮ՑᇿҨႿ 1998 ୍đط 2001 ୍ favlet ၂ՍҌФ Tantek Çelik ൮ՑႨđၹՎॖၛಒಪ bookmarklet Ҍ൞ቋᆞ ൔa๙Ⴈ֥ሳĠ 2. ၛഈሧਘটሱ wikipedia Ġ 3. ॖ۴ऌሳ֥ܒӮđ۳༯۱ࡥֆ֥קၬb
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
BOOKMARKLET ೂޅؿߨቔႨĤ javascript:(function(){ /* blah blah */ })(); 8 Wednesday,
December 22, 2010 گᄖ֥ bookmarklet ႋႨ๙ӈҐႨେݦඔটЇݕսđིݔაభ်ൕ২ཌྷđْ߭ undefinded đၹՎन҂߶Ӂളྍ໓֖b
گᄖ֥ 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
گᄖ֥ 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
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
گᄖ֥ 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 Wednesday, December 22, 2010
• ః၂đຓ҆ЧьႿषؿᆀ ࣉྛϱЧ֥၂۷ྍđᄜ ކ CGI ࡼֹᆶ 301/302 ᇗק ཟ֥ٚൔ఼ྛປӮྍϱЧ֥ ෂđЌᆣग़؊ᇔ٠໙
ቋྍϱЧĠ • ҂ӮđߎႵః֥ჰၹĤ ູહնࡅམᄛೆຓ҆ЧĤ Bookmarklet CGI ᄛೆ ᆳྛ ቋྍЧ໓ࡱ ᇗקཟ ࡆൈࡗՄ CDN ᄎྛ ࠹ etc. ဵ ൞֥b 14 Wednesday, December 22, 2010 1. ֻ၂۱ჰၹ൞ࡆ఼ؓग़؊ϱЧ֥॥ᇅĠ 2. ০Ⴈ CGI ॖၛᄝᇗקཟᆭభൌགྷᇭ؟ြༀઆࠠđೂ࠹aളӮ sessionđമᇀ൞৯नޙĠ 3. Վ်ࡼӇ൫ࢳֻؽ۱Ⴎb
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 ؟۱ϱЧ֥ᛍফఖҩ൫ࢲݔđЧᇛଽࡼᆜԛđ౨ܱᇿ вದѰग़Ġ
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
BOOKMARKLET ֥Ӊ؇ཋᇅ ഈཋᆴ = 255 17 Wednesday, December 22, 2010
ೂݔေॉ੮ TT4 đᄵӉ؇ഈཋູ 255 bytes b
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Ҁԉ……
ؽa࿐߶ࡨഒೆѩᇍಙ 19 Wednesday, December 22, 2010
•၇ঠଢѓ်૫طթᄝĠ •܋ཚሢ၂۱ DOMĠ •ࢱᮕb w౨۳ᆃဢቓ֥Ⴎx 20 Wednesday, December 22, 2010
1. ႮЧোӁ֥หᆘ෮थקğૌ֥ႋႨิ܂ۿିđଢѓ်૫ิ܂ႋႨӆࣟbႱೂ༙ބ֥ܱ༢ğູ༙༙ิ܂ਔࡲ ूЌᅰđط༙ग़ܴഈູ༙ิ܂ਔൊĠ 2. Ⴕೂದো܋ႚႵֹ౯đૌ֥ႋႨބଢѓ်૫܋ཚ၂۱ DOM đր DOM ࡼႵၭႿۿିؿߨĠ 3. Ⴊྮ֥षؿᆀն؟ؓսೂߑ“ࢱᮕ”b
• ࣐ਈ҂ေႄೆӈো९đ х૧ၹϱЧ҂طᄯӮ֥໙ีĠ • ܵݺሱ࠭ห֥ଁॢࡗđ ࣇิ܂Ⴈ෮ླ֥܄܋ٚمĠ • ҂ေྩڿؓའჰđ ൈᇿၩଢѓ်૫൞ڎྩڿჰĠ •
Ԣ٤Ⴈᆇ֥ᆩ֡ؿളਔહđ ڎᄵ҂ေቅᆸ൙ࡱવஞބଏಪྛູĠ • ֩֩…… ࡨഒ JAVASCRIPT Ҫ૫֥ཌྷೆ 21 Wednesday, December 22, 2010 Ֆ Javascript Ҫࡥေฐษೂޅࡨഒཌྷೆğ 1. бೂޓ؟భ؊ো९Ⴈ $() ቔູ࿊ᄴఖݦඔđڭۂھݦඔॖିᄯӮჰ်૫ۿିാིđ QQ ᄉൻೆمଢభႨჰളսщ ཿĠ 2. QQ ᄉൻೆمଢభࣇႨ QQWebIME ᆃ۱ଁॢࡗĠ 3. ђؓའඋྟൈႋေཬྏĠ 4. ၛ WebQQ ބ QQ ᄉൻೆم֥ކቔູ২ğ֒Ⴈీࠌ߭Ӛൈсྶ༵୫ౢ൞০Ⴈ QQ ᄉൻೆمটൻೆၻԱߎ൞ WebQQ ؿ ෂཨ༏đೂݔ൞భᆀđᄵॖၛቅᆸવஞၛٝᆸၻԱФิࢌĠ
ٚσ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
ٚσ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
a࠺֤ൈख़ᅧ॥ DOM ֥э߄ 24 Wednesday, December 22, 2010
ູޅေࡓ॥DOM֥э߄Ĥ ࡓ॥ DOM э߄ ॴთ໓֖Ԣຓ ࡓ॥ iframe ֥э߄ ऎุ ۿିڭۂ
w෮Ⴕxሰ໓֖ ଢ֥ ࠻Ⴕ iframe ֥໓֖ᇗᄛ ྍ iframe ֥ၳ҄ളӮ 25 Wednesday, December 22, 2010 1. ࡓ॥֥ჰၹğႮႿ iframe ଽಸॴ໓֖đၹՎླေૌࣉྛჍၛࡓ॥ބԩĠ 2. ࡓ॥֥ؓའğሰ໓֖đࠧ iframe ჭĠ 3. ቋᇔ֥ଢ֥ğૌ֥Ӂۿିڭۂ֞ଢѓ်૫֥෮Ⴕሰ်૫Ġ 5. ॴთ໓֖Ԣຓb
ೂޅൌീࡓ॥ĤPT.A ؓႿᄝࡓ॥ᆭభФҬೆ DOM ֥ሰ໓֖ğ 1.ࠆ౼෮Ⴕሰ໓֖đђѩ؎൞ڎႵಃཋ٠໙đ ીႵಃཋđᄵ๋ݖĠ 2.ೂႵಃཋđᄵࡓ๐ః load ൙ࡱđѩᄝओѣݦඔᇏᇗ گ҄ᇧ၂đၛ۵ሶሰ໓֖ᇗᄛࠇ๋ሇު֥э߄Ġ
3.࿃ᄝఃଽ҆࿙ᅳሰ໓֖đѩᇗگཌྷ֥Ҡቔb 26 Wednesday, December 22, 2010 නਫ਼ğႮഈສ༯ђᆜ۱ DOM ඎđࡓ॥෮ႵૌႵಃ٠໙֥ሰ໓֖đ൮༵ಞۿିڭۂ֞ૌđᄜૌႵି৯ࡼۿିڭۂ֞ ૌ֥ሰ໓֖bč٤ׄđսĎ
ೂޅൌീࡓ॥ĤPT.B ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ 1.࣐ਈҐ౼Фٚمđࠧ๙ݖ൙ࡱࠇఃࠏᇅಞᛍফ ఖ๙ᆩૌ DOM ֥э߄ࢲݔĠ 2.ೂݔФٚمིđҐ౼ᇶҰ DOM
൞ڎэ߄ ֥ٚൔĠ 3.؟ᇕٚمѩթൈđིੱႪ༵b 27 Wednesday, December 22, 2010 නਫ਼ğ ০Ⴈ൙ࡱ๙ᆩč֩োරٚمĎࠇקൈᇶҰ֥ٚمটҰ DOM ൞ڎФҬೆሰ໓֖đᅳ֞Фၳ҄Ҭೆ֥ྍ֥ሰ໓֖ު ᄜࣉྛభ၂်֥ٚمࣉྛࡓ॥ԩb
ೂޅൌീࡓ॥Ĥ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
ೂޅൌീࡓ॥Ĥ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
ೂޅൌീࡓ॥Ĥ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/) đૌॖၛ০Ⴈᆃ ۱ٚمಀࢳथࣂ฿ૌმ֥֞໙ีĠ
ೂޅൌീࡓ॥Ĥ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
ೂޅൌീࡓ॥Ĥ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)
ೂޅൌീࡓ॥Ĥ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
ೂޅൌീࡓ॥Ĥ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
ೂޅൌീࡓ॥ĤPT.F ؓႿᄝࡓ॥ᆭުФҬೆ DOM ֥ሰ໓֖ğ •ೂݔഈඍФ๙ᆩٚم҂ᆦӻđॖၛҐႨᇶҩ مĠ •Ⴈקൈఖ҂؎ࡓ๐ iframe ჭ֥ඔਈđѩؓၘࡓ॥ ֥
iframe յഈ flag đؿളэ߄ൈҰ൞ڎթᄝ flag đ ೂໃթᄝđᄵ൪ູྍⳢ iframeĠ •࡙ಸྟğఃჅ֥ᛍফఖ 35 Wednesday, December 22, 2010 1. ෮Ⴕ A ࠩᛍফఖॖၛႨᆭభ֥ٚσࣉྛ࡙ಸđമᇀЇও iOS ބ Android ֩၍ഡСᛍফఖbೂݔླေሼ֞ fallback ᆃ၂҄đ ۱ದत֤֚҂ೂ҂ቓ࡙ಸਔĠ 2. ၛഈޅٚمؓॴთ໓֖नིb
ࢌੀൈࡗ อ · ౹ӑ http://QuChao.com
[email protected]
36 Wednesday, December 22,
2010
྆྆նࡅ Dec 18th, 2010 37 Wednesday, December 22, 2010