用于创建跨页面共享组件,例如全局播放器。 项目地址
演示地址
使用
首页 index.html
1 2 3 4 5 6 7 8 9 10 11 12
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> 我是首页 <script src="https://cdn.jsdelivr.net/gh/aweiu/JsLibs/libs/js/singlePage.js?singlePage/global.html"></script> </body> </html>
|
共享组件 global.html
:
1 2 3 4 5 6 7 8 9 10 11 12
| <style> div { } </style> <div id="globalDiv">我是全局资源,哈哈哈!无论你怎么切换页面,我都在哦~</div> <script> var i = 0 setInterval(function() { document.getElementById('globalDiv').innerHTML += i++ }, 1000) </script>
|
ok, 大功告成了!按照上述例子,假设你在其它页面中也引入 global.html
:
1
| <script src="https://cdn.jsdelivr.net/gh/aweiu/JsLibs/libs/js/singlePage.js?singlePage/global.html"></script>
|
那么你会发现,页面即使发生”跳转”,计时器仍然平稳运行!一个简单的单页应用完成了!
是的,你完全不用关注单页应用的实现,每个页面还是按着你之前习惯的方式去写就好了,各自页面维护各自资源。
相关文章
喜马拉雅黑科技——无卡顿网页播放器