Submit Search
Upload
Html5 history api
•
Download as PPTX, PDF
•
0 likes
•
479 views
景
景智 張
Follow
為什麼會有HTML5 histroy API? ajax帶來那些缺點? 早期如何解決? 現在的做法?
Read less
Read more
Education
Report
Share
Report
Share
1 of 9
Download now
Recommended
Chrome扩展开发入门
Chrome扩展开发入门
greatghoul
List Down Your Expectations
List Down Your Expectations
SV.CO
Plan clases ingles orinson valenciano
Plan clases ingles orinson valenciano
orinsonvalenciano11c
LR KONKURENCIJOS TARYBOS (KT) 2015 m. VEIKLOS ATASKAITA
LR KONKURENCIJOS TARYBOS (KT) 2015 m. VEIKLOS ATASKAITA
Arunas Vizickas ✔
Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.
Serhii Stasko
Baala bhaavana (neethi satakamu) బాల భావన ( నీతి శతకము.)
Baala bhaavana (neethi satakamu) బాల భావన ( నీతి శతకము.)
Chinta Rama Krishna Rao
EL BOSQUE ENCANTADO
EL BOSQUE ENCANTADO
Verónica Nicolás Nicolás
Todo cambia (lestura liviana)gaby
Todo cambia (lestura liviana)gaby
gabyah1702
Recommended
Chrome扩展开发入门
Chrome扩展开发入门
greatghoul
List Down Your Expectations
List Down Your Expectations
SV.CO
Plan clases ingles orinson valenciano
Plan clases ingles orinson valenciano
orinsonvalenciano11c
LR KONKURENCIJOS TARYBOS (KT) 2015 m. VEIKLOS ATASKAITA
LR KONKURENCIJOS TARYBOS (KT) 2015 m. VEIKLOS ATASKAITA
Arunas Vizickas ✔
Эффективные кампании в интернете для разных задач МСБ.
Эффективные кампании в интернете для разных задач МСБ.
Serhii Stasko
Baala bhaavana (neethi satakamu) బాల భావన ( నీతి శతకము.)
Baala bhaavana (neethi satakamu) బాల భావన ( నీతి శతకము.)
Chinta Rama Krishna Rao
EL BOSQUE ENCANTADO
EL BOSQUE ENCANTADO
Verónica Nicolás Nicolás
Todo cambia (lestura liviana)gaby
Todo cambia (lestura liviana)gaby
gabyah1702
Social Media Success in International Student Recruitment
Social Media Success in International Student Recruitment
Marty Bennett
Roma solo fotos
Roma solo fotos
carloslhoz
SHERRI GOODWIN Resume 1 (2)
SHERRI GOODWIN Resume 1 (2)
Sherri Goodwin
Homoeopathic Home Prescribing Class 18th October 2014
Homoeopathic Home Prescribing Class 18th October 2014
Owen Homoeopathics
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнес
Justine Toms
Spelling Quiz ( Commonly Misspelled English Words)
Spelling Quiz ( Commonly Misspelled English Words)
Jonna Cadores
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
searls
SMS il RE della comunicazione
SMS il RE della comunicazione
Davide Ricca
Casa Duplex
Casa Duplex
Consultor Imobiliário
Program rada i financijski plan 2015.
Program rada i financijski plan 2015.
stipepetrina
Youth Participation - learned lessons from Sensoa's history
Youth Participation - learned lessons from Sensoa's history
Elizabeth Verhetsel
721- Pets and kids-2
721- Pets and kids-2
mireille 30100
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
István Kolozsi
Trabajo colaborativo list
Trabajo colaborativo list
Katerin Colcha
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
tbosstraining
2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
Chih-Wei Chuang
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node Web开发实战
Node Web开发实战
fengmk2
More Related Content
Viewers also liked
Social Media Success in International Student Recruitment
Social Media Success in International Student Recruitment
Marty Bennett
Roma solo fotos
Roma solo fotos
carloslhoz
SHERRI GOODWIN Resume 1 (2)
SHERRI GOODWIN Resume 1 (2)
Sherri Goodwin
Homoeopathic Home Prescribing Class 18th October 2014
Homoeopathic Home Prescribing Class 18th October 2014
Owen Homoeopathics
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнес
Justine Toms
Spelling Quiz ( Commonly Misspelled English Words)
Spelling Quiz ( Commonly Misspelled English Words)
Jonna Cadores
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
searls
SMS il RE della comunicazione
SMS il RE della comunicazione
Davide Ricca
Casa Duplex
Casa Duplex
Consultor Imobiliário
Program rada i financijski plan 2015.
Program rada i financijski plan 2015.
stipepetrina
Youth Participation - learned lessons from Sensoa's history
Youth Participation - learned lessons from Sensoa's history
Elizabeth Verhetsel
721- Pets and kids-2
721- Pets and kids-2
mireille 30100
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
István Kolozsi
Trabajo colaborativo list
Trabajo colaborativo list
Katerin Colcha
Viewers also liked
(14)
Social Media Success in International Student Recruitment
Social Media Success in International Student Recruitment
Roma solo fotos
Roma solo fotos
SHERRI GOODWIN Resume 1 (2)
SHERRI GOODWIN Resume 1 (2)
Homoeopathic Home Prescribing Class 18th October 2014
Homoeopathic Home Prescribing Class 18th October 2014
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнес
Spelling Quiz ( Commonly Misspelled English Words)
Spelling Quiz ( Commonly Misspelled English Words)
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
JavaScript Craftsmanship: Why JavaScript is Worthy of TDD
SMS il RE della comunicazione
SMS il RE della comunicazione
Casa Duplex
Casa Duplex
Program rada i financijski plan 2015.
Program rada i financijski plan 2015.
Youth Participation - learned lessons from Sensoa's history
Youth Participation - learned lessons from Sensoa's history
721- Pets and kids-2
721- Pets and kids-2
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
IT+Summer Edition - Alkossunk élményt - Kolozsi István, kolboid
Trabajo colaborativo list
Trabajo colaborativo list
Similar to Html5 history api
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
Html5 mobile web app浅谈
Html5 mobile web app浅谈
sankyu Tang
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
tbosstraining
2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
Chih-Wei Chuang
Ajax Transportation Methods
Ajax Transportation Methods
yiditushe
HTML5概览
HTML5概览
Adam Lu
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node Web开发实战
Node Web开发实战
fengmk2
Node Web开发实战
Node Web开发实战
fengmk2
Javascript autoload
Javascript autoload
jay li
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
AJAX Search & Cross Domain Survey
AJAX Search & Cross Domain Survey
firestoke
Similar to Html5 history api
(20)
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Html5 mobile web app浅谈
Html5 mobile web app浅谈
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
2015.07.22 新人報告(3)
2015.07.22 新人報告(3)
Ajax Transportation Methods
Ajax Transportation Methods
HTML5概览
HTML5概览
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Node Web开发实战
Node Web开发实战
Node Web开发实战
Node Web开发实战
Javascript autoload
Javascript autoload
非常靠谱 Html 5
非常靠谱 Html 5
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Real time web实时信息流推送
Real time web实时信息流推送
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
網頁開發工具 20140630
網頁開發工具 20140630
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
AJAX Search & Cross Domain Survey
AJAX Search & Cross Domain Survey
Recently uploaded
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
jhujyunjhang
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
michaelell902
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
微信 tytyqqww业务接单
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
businesshealthwise
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
PUAXINYEEMoe
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
jhujyunjhang
Recently uploaded
(6)
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
Html5 history api
1.
HTML5 history API
2.
ajax(Asynchronous JavaScript and
XML) 潮潮 Der 過去 現在 一切看似完美,但其中造成一些問題
3.
ajax 帶來哪些問題? SEO 破壞瀏覽紀錄 資料驗證 {JS}HI 123 HTML5 history
API,因此誕生
4.
過去作法 瀏覽器記錄歷史紀錄條件? URL 改變
(iframe 或 當前頁面) => window.history https://www.google.com.tw/webhp?sourceid=chrome-instant&ie=UTF-8#q=javascript%20icon 協定 host pathname search hash 解析URL window.location.href
5.
URL HASH index.html =>
apple => banana 使用者瀏覽 HASH "" #page1 #page2 js onload() location.hash="#page1" location.hash="#page2" 上一頁 window.onhashchange=function() { switch(window.location.hash) { case "#page1": page1(); break; case "#page2": page2(); break; } Refresh? 題外話:SEO?
6.
HTML5 history API window.history pushState(state,
title, url) 加入歷史紀錄 replaceState(state, title, url) 修改當前紀錄 window.onpopstate=function(event){} 更動歷史紀錄時觸發 state state state ………………………….
7.
HTML5 history API index.html
=> apple => banana 使用者瀏覽 URL "" domain/apple js onload() pushstate({page:"page1"}, "", "/apple")pushstate({page:"page1"}, "", "/apple") domain/apple 上一頁 window.onpopstate=function(event){ switch(event.state.page) { case "page1": page1(); break; case "page2": page2(); break; } } Refresh? xmlhttp.setRequestHeader("pjax", true); pushstate+ajax=PJAX
8.
Reference http://sls.weco.net/blog/ie955126/25-dec-2008/11896 (ajax 優缺) http://rettamkrad.blogspot.tw/2013/04/ajaxandhistoryapi.html
(ajax 瀏覽紀錄) https://developers.google.com/webmasters/ajax-crawling/docs/getting-started (google ajax crawable) https://developer.mozilla.org/zh- TW/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Manipulating_the_browser_histo ry HTML5 history API
9.
Q&A
Editor's Notes
?_escaped_fragment_=key=value
640k,title:敘述state
github
Download now