2013年5月3日 星期五

[HTML]測試與實做pushstate .

HTML5用了新的API,history.pushState和history.replaceState,就是通過這個接口做到無刷新改變頁面URL的。

主程式 index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Push state</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script language="javascript" type="text/javascript"><!-- $(document).ready(function(e) { $("a").click(function(e){ if (history.pushState) { e.preventDefault(); var url = $(this).attr("href"); history.pushState({page:url}, url, url); updateSite(url); } }); }); $(window).bind("popstate", function(e){ var state = event.state; if(state){ updateSite(state.page); }else{ updateSite("home"); } }); function updateSite(currentPage){ $.get(currentPage, function(data) { $('#ajax').html(data); }); } --> </script> </head> <body> <a href="link1.html">Link 1</a> <a href="link2.html">Link 2</a> <div id="ajax"></div> </body> </html> 相關網址 link1.html <iframe width="1024" height="900" src="http://www.splashtop.com/zh-TW/home" frameborder="0" allowfullscreen></iframe> 相關網址 link2.html <iframe width="1500" height="600" src="http://www.splashtop.com/zh-TW/home" frameborder="0" allowfullscreen></iframe>

【下列文章您可能也有興趣】

沒有留言: