Enviar búsqueda
Cargar
Bookmarklet型(云端)应用的前端架构
•
5 recomendaciones
•
668 vistas
taobao.com
Seguir
BOOKMARKLET 型(云端)应用的前端架构 腾讯 · 屈超
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 37
Descargar ahora
Descargar para leer sin conexión
Recomendados
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
Recomendados
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
Más contenido relacionado
La actualidad más candente
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
La actualidad más candente
(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)
Destacado
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
Destacado
(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...
Más de 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
Más de 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实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
Último
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Último
(20)
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
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
Descargar ahora