Soumettre la recherche
Mettre en ligne
Bookmarklet型(云端)应用的前端架构
•
5 j'aime
•
668 vues
taobao.com
Suivre
BOOKMARKLET 型(云端)应用的前端架构 腾讯 · 屈超
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 37
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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)
En vedette
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
En vedette
(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...
Plus 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
Plus 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实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
Dernier
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
SynarionITSolutions
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Principled Technologies
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
The Digital Insurer
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
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
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Dernier
(20)
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
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
Télécharger maintenant