Submit Search
Upload
Bookmarklet型(云端)应用的前端架构
•
5 likes
•
668 views
taobao.com
Follow
BOOKMARKLET 型(云端)应用的前端架构 腾讯 · 屈超
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 37
Download now
Download to read offline
Recommended
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
Recommended
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
More Related Content
What's hot
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
What's hot
(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)
Viewers also liked
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
Viewers also liked
(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...
More from 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
More from 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实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
Recently uploaded
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - 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
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
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
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
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
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
hans926745
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Recently uploaded
(20)
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
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...
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
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
Download now