Suche senden
Hochladen
Bookmarklet型(云端)应用的前端架构
•
5 gefällt mir
•
668 views
taobao.com
Folgen
BOOKMARKLET 型(云端)应用的前端架构 腾讯 · 屈超
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 37
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
MongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 real
jan_mindmatters
03 Custom Classes
03 Custom Classes
Mahmoud
09 Data
09 Data
Mahmoud
Proved PHP Design Patterns for Data Persistence
Proved PHP Design Patterns for Data Persistence
Gjero Krsteski
MongoDB For C++ Developers
MongoDB For C++ Developers
Ynon Perek
2013-03-23 - NoSQL Spartakiade
2013-03-23 - NoSQL Spartakiade
Johannes Hoppe
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
GFU Cyrus AG
Node-IL Meetup 12/2
Node-IL Meetup 12/2
Ynon Perek
Empfohlen
MongoDB & Mongomapper 4 real
MongoDB & Mongomapper 4 real
jan_mindmatters
03 Custom Classes
03 Custom Classes
Mahmoud
09 Data
09 Data
Mahmoud
Proved PHP Design Patterns for Data Persistence
Proved PHP Design Patterns for Data Persistence
Gjero Krsteski
MongoDB For C++ Developers
MongoDB For C++ Developers
Ynon Perek
2013-03-23 - NoSQL Spartakiade
2013-03-23 - NoSQL Spartakiade
Johannes Hoppe
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
GFU Cyrus AG
Node-IL Meetup 12/2
Node-IL Meetup 12/2
Ynon Perek
03DOM.ppt
03DOM.ppt
Bhavani Testone
Introduction to HTML5
Introduction to HTML5
Adrian Olaru
Jquery at-webcamp
Jquery at-webcamp
gaplabs
Custom YUI Widgets
Custom YUI Widgets
cyrildoussin
Developing in HTML5: Widgetbox & Sencha Touch
Developing in HTML5: Widgetbox & Sencha Touch
Sencha
Di and Dagger
Di and Dagger
K. Matthew Dupree
MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)
jan_mindmatters
Ranking Report For Splinternet Marketing 3 28 2011
Ranking Report For Splinternet Marketing 3 28 2011
SEO, LLC dba www.SplinternetMarketing.com
Some Of Our Global Top 30 Organic Search Engine Rankings
Some Of Our Global Top 30 Organic Search Engine Rankings
SEO, LLC dba www.SplinternetMarketing.com
Siguria - Informatika Biznesore
Siguria - Informatika Biznesore
Menaxherat
用寧靜心擁抱世界
用寧靜心擁抱世界
Josephine C
Ranking analysis-12-20-2011-2
Ranking analysis-12-20-2011-2
SEO, LLC dba www.SplinternetMarketing.com
世界著名高層建築物
世界著名高層建築物
Josephine C
Social Maturity of Mountain Travel Industry
Social Maturity of Mountain Travel Industry
Kathy Herrmann
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
SEO, LLC dba www.SplinternetMarketing.com
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
shriniwaskashalikar
Rankings new-site-three-week-comparison
Rankings new-site-three-week-comparison
SEO, LLC dba www.SplinternetMarketing.com
Earth 盧廣《中國的污染》
Earth 盧廣《中國的污染》
Josephine C
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
SEO, LLC dba www.SplinternetMarketing.com
運用Closure Compiler 打造高品質的JavaScript
運用Closure Compiler 打造高品質的JavaScript
taobao.com
Telling your story
Telling your story
Alexandra Laney (Chaikin), PMP
How will Brexit impact on Construction?
How will Brexit impact on Construction?
Francis Ho
Weitere ähnliche Inhalte
Was ist angesagt?
03DOM.ppt
03DOM.ppt
Bhavani Testone
Introduction to HTML5
Introduction to HTML5
Adrian Olaru
Jquery at-webcamp
Jquery at-webcamp
gaplabs
Custom YUI Widgets
Custom YUI Widgets
cyrildoussin
Developing in HTML5: Widgetbox & Sencha Touch
Developing in HTML5: Widgetbox & Sencha Touch
Sencha
Di and Dagger
Di and Dagger
K. Matthew Dupree
MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)
jan_mindmatters
Was ist angesagt?
(7)
03DOM.ppt
03DOM.ppt
Introduction to HTML5
Introduction to HTML5
Jquery at-webcamp
Jquery at-webcamp
Custom YUI Widgets
Custom YUI Widgets
Developing in HTML5: Widgetbox & Sencha Touch
Developing in HTML5: Widgetbox & Sencha Touch
Di and Dagger
Di and Dagger
MongoDB on Rails (and Ruby)
MongoDB on Rails (and Ruby)
Andere mochten auch
Ranking Report For Splinternet Marketing 3 28 2011
Ranking Report For Splinternet Marketing 3 28 2011
SEO, LLC dba www.SplinternetMarketing.com
Some Of Our Global Top 30 Organic Search Engine Rankings
Some Of Our Global Top 30 Organic Search Engine Rankings
SEO, LLC dba www.SplinternetMarketing.com
Siguria - Informatika Biznesore
Siguria - Informatika Biznesore
Menaxherat
用寧靜心擁抱世界
用寧靜心擁抱世界
Josephine C
Ranking analysis-12-20-2011-2
Ranking analysis-12-20-2011-2
SEO, LLC dba www.SplinternetMarketing.com
世界著名高層建築物
世界著名高層建築物
Josephine C
Social Maturity of Mountain Travel Industry
Social Maturity of Mountain Travel Industry
Kathy Herrmann
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
SEO, LLC dba www.SplinternetMarketing.com
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
shriniwaskashalikar
Rankings new-site-three-week-comparison
Rankings new-site-three-week-comparison
SEO, LLC dba www.SplinternetMarketing.com
Earth 盧廣《中國的污染》
Earth 盧廣《中國的污染》
Josephine C
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
SEO, LLC dba www.SplinternetMarketing.com
運用Closure Compiler 打造高品質的JavaScript
運用Closure Compiler 打造高品質的JavaScript
taobao.com
Telling your story
Telling your story
Alexandra Laney (Chaikin), PMP
How will Brexit impact on Construction?
How will Brexit impact on Construction?
Francis Ho
Telekomunikimet
Telekomunikimet
Menaxherat
Flexera Software Consulting
Flexera Software Consulting
Flexera
Web rebuild
Web rebuild
taobao.com
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
SEO, LLC dba www.SplinternetMarketing.com
Andere mochten auch
(19)
Ranking Report For Splinternet Marketing 3 28 2011
Ranking Report For Splinternet Marketing 3 28 2011
Some Of Our Global Top 30 Organic Search Engine Rankings
Some Of Our Global Top 30 Organic Search Engine Rankings
Siguria - Informatika Biznesore
Siguria - Informatika Biznesore
用寧靜心擁抱世界
用寧靜心擁抱世界
Ranking analysis-12-20-2011-2
Ranking analysis-12-20-2011-2
世界著名高層建築物
世界著名高層建築物
Social Maturity of Mountain Travel Industry
Social Maturity of Mountain Travel Industry
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
Tanavmuktisathi Upayukta Llekh Bestseller For Stress Management Dr. Shriniwa...
Rankings new-site-three-week-comparison
Rankings new-site-three-week-comparison
Earth 盧廣《中國的污染》
Earth 盧廣《中國的污染》
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Seo And Interne...
運用Closure Compiler 打造高品質的JavaScript
運用Closure Compiler 打造高品質的JavaScript
Telling your story
Telling your story
How will Brexit impact on Construction?
How will Brexit impact on Construction?
Telekomunikimet
Telekomunikimet
Flexera Software Consulting
Flexera Software Consulting
Web rebuild
Web rebuild
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Seo And Search Engine Ranking Report Splinternetmarketing.Com Internet Market...
Mehr von taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
Mehr von taobao.com
(20)
编辑器设计U editor
编辑器设计U editor
Berserk js
Berserk js
淘宝开放产品前端实践
淘宝开放产品前端实践
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
第三方内容开发最佳实践
第三方内容开发最佳实践
编辑器设计Kissy editor
编辑器设计Kissy editor
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Kind editor设计思路
Kind editor设计思路
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
Kürzlich hochgeladen
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
charlottematthew16
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Precisely
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
charlottematthew16
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Kürzlich hochgeladen
(20)
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Bookmarklet型(云端)应用的前端架构
1.
BOOKMARKLET
( ) · QuChao.com Wednesday, December 22, 2010 1 1. “ ” QQ Bookmarklet 2.
2.
CONTENTS
• Bookmarklet 15min • 10min • DOM 10min Wednesday, December 22, 2010 2 D2
3.
ABOUT ME
- Chappell QU · · Chappell.Wat@Gmail.com http://QuChao.com Wednesday, December 22, 2010 3 Web
4.
BOOKMARKLET Wednesday, December 22,
2010 4
5.
BOOKMARKLET
Bookmarklet Favlet = = Bookmark Favorite + Applet + Applet Applet Wednesday, December 22, 2010 5 1. Bookmarklet Bookmark applet Java 2. Favlet Favorite IE 3. wikipedia (http://zh.wikipedia.org/zh-cn/Bookmarklet)
6.
BOOKMARKLET
Bookmarklet “ = Bookmark + Applet ” Wednesday, December 22, 2010 6 1. bookmarklets.com 1998 2001 favlet Tantek Çelik bookmarklet 2. wikipedia 3.
7.
BOOKMARKLET
void : undefinded void(0);”>…</a> <a href=” javascript: void javascript : undefinded Wednesday, December 22, 2010 7 1. bookmarklet 2. IE6 onclick
8.
BOOKMARKLET
javascript:(function(){ /* blah blah */ })(); Wednesday, December 22, 2010 8 bookmarklet undefinded
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'); Wednesday, December 22, 2010 9 1. Bookmarklet 2. Firebug Lite (http://getfirebug.com/firebuglite) 3.
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'); Wednesday, December 22, 2010 10 1. Design Bookmarklet (http://www.sprymedia.co.uk/article/Design) 2.
11.
BOOKMARKLET
javascript: void((function () { var element = document.createElement('script'); element.setAttribute('src', 'http://dict.cn/hc/init.php'); document.body.appendChild(element); })()) Wednesday, December 22, 2010 11 1. Dict.cn Bookmarklet (http://dict.cn/foot/help.htm) 2.
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) Wednesday, December 22, 2010 12 1. QQ Bookmarklet (http://py.qq.com/web) 2.
13.
Wednesday, December 22,
2010 13
14.
Bookmarklet
• CGI 301/302 CGI etc. CDN • Wednesday, December 22, 2010 14 1. 2. CGI session 3.
15.
BOOKMARKLET
6 var = Math.min( href , 2,083 >100k >100k >100k >100k , 508 >100k >100k 34,464 65,530 ); 2,083 65,536 >100k 2,347 >100k Wednesday, December 22, 2010 15 1. bookmarklet 2. Bookmarklet 3. IE6 508 bytes 4. 20
16.
BOOKMARKLET
href 2,083 >100k >100k >100k >100k 508 >100k >100k 34,464 65,530 2,083 65,536 >100k 2,347 >100k 255 4096 Wednesday, December 22, 2010 16 1. “ ” “ ” 2. TT4 255 bytes QQBrowser 4096 bytes
17.
BOOKMARKLET
= 255 Wednesday, December 22, 2010 17 TT4 255 bytes
18.
BOOKMARKLET
3 javascript: (function2(q) { !! q ? q.toggle() : (function (d, j) { j = d.createElement('script'); 1 j.src = '//ime.qq.com/fcgi-bin/getjs'; 4 j.setAttribute('ime-cfg', 'lt=2'); d.getElementsByTagName('head')[0].appendChild(j) })(document) })(window.QQWebIME) 1. CGI 2. 3. 4. 5. …… Wednesday, December 22, 2010 18 QQ Bookmarklet 1. // https 2. 255 3. / 4. 5. ……
19.
Wednesday, December 22,
2010 19
20.
•
• DOM • Wednesday, December 22, 2010 20 1. 2. DOM DOM 3. “ ”
21.
JAVASCRIPT
• • • • • …… Wednesday, December 22, 2010 21 Javascript 1. $() QQ 2. QQ QQWebIME 3. 4. WebQQ QQ QQ WebQQ
22.
CSS/HTML
A B C HTML iframe Flash/SilverLight/... UI CSS JS Wednesday, December 22, 2010 22 A. CSS B. QQ iframe Firefox C. Javascript
23.
QQ
<style> A+ qqwebime { color: blue; } </style> HTML <script> isIE && doc.createElement(‘qqwebime’); </script> CSS <qqwebime>QQ </qqwebime> ref: http://ejohn.org/blog/html5-shiv/ Wednesday, December 22, 2010 23 1. QQ “ ” “ A” “ CSS ” * {} :first-child{} 2. jQuery Jesig (http://ejohn.org/blog/html5-shiv/) 3. ISD Damao
24.
DOM Wednesday, December 22,
2010 24
25.
DOM
DOM iframe iframe iframe Wednesday, December 22, 2010 25 1. iframe 2. iframe 3. 5.
26.
PT.A
DOM 1. 2. load 3. Wednesday, December 22, 2010 26 DOM
27.
PT.B
DOM 1. DOM 2. DOM 3. Wednesday, December 22, 2010 27 DOM
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 1~9 3~5 9-11 9 Wednesday, December 22, 2010 28 1. Mutation Events 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 IE 6/7/8
29.
PT.C
DOM document.addEventListener( • Mutation Events // DOMNodeInserted 'DOMNodeInserted', function (evt) { // // var curTarget = evt.target; • Mutation Events DOM Level 2 Core // iframe if (1 !== curTar.nodeType || ‘iframe’ !== curTar.nodeName) return; (via http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html) // iframe DOM • }, 1~4 1~9 3~5 9/10 9 false ); Wednesday, December 22, 2010 29
30.
PT.D
DOM • IE CSS Expression • Behavior Expression (ref: http://dean.edwards.name/weblog/2005/06/base64-sexy/) • 6/7 Wednesday, December 22, 2010 30 1. PNG IE6 (http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/) IE CSS Expression IE bug 2. Expression “ ” Dean Edwards 05 (http://dean.edwards.name/weblog/2005/06/base64-sexy/)
31.
PT.D
DOM <style> • IE iframe { CSS Expression behavior:expression(iframeInserted(this)); } </style> • <script> Behavior Expression function iframeInserted(node) { (via http://dean.edwards.name/weblog/2005/06/base64-sexy/) // node.style.behavior = 'none'; • // 6/7 iframe DOM } </script> Wednesday, December 22, 2010 31
32.
PT.E
DOM • IE8 Accessor (getter/setter) innerHTML appendChild • IE8 Accessor (getter/setter) MSDN (ref: http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) • 8std Wednesday, December 22, 2010 32 1. IE outerHTML DOM Accessor (getter/setter) MSDN IE8 innerHTML appendChild 2. MSDN (http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx)
33.
PT.E
DOM • // IE8 innerHTML Accessor (getter/setter) innerHTML var propDscrptr = Object.getOwnPropertyDescriptor appendChild (Element.prototype, ‘innerHTML’); // innerHTML Object.defineProperty(Element.prototype, ‘innerHTML’, { // setter • set: function (html) Accessor (getter/setter) IE8 { MSDN // innerHTML set propDscrptr.set.call(this, html); (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) // iframe DOM • }); } 8std Wednesday, December 22, 2010 33 innerHTML hack outerHTML
34.
PT.E
DOM • IE8 Accessor (getter/setter) // innerHTML appendChild appendChild var methodProto = Element.prototype[‘appendChild’]; // appendChild Element.prototype[‘appendChild’] = function () { // appendChild • IE8 res = methodProto.apply(this, arguments); var Accessor (getter/setter) MSDN // iframe DOM (via http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx) return result; • }; 8std Wednesday, December 22, 2010 34 appendChild hack insertBefore
35.
PT.F
DOM • • iframe iframe flag flag iframe • Wednesday, December 22, 2010 35 1. A iOS Android fallback 2.
36.
·
http://QuChao.com Chappell.Wat@Gmail.com Wednesday, December 22, 2010 36
37.
Dec 18th, 2010 Wednesday,
December 22, 2010 37
Jetzt herunterladen