QQ音乐网页版的路由


前提:改变hash值 和 改变iframe的src值都会 增加浏览器历史记录。
如果不作处理,每次通过hash的改变而修改iframe的src值将导致 产生 两条历史记录

QQ音乐网页版 同时使用了这两个东西,


 <iframe name="contentFrame" id="contentFrame" width="100%" height="1382px" allowtransparency="true" scrolling="no" border="0" frameborder="0" src="about:blank"></iframe>

QQ音乐同时利用hash ( http://y.qq.com/ #type=toplist&p=top_index ) 进行路由,但是它的 iframe 的 src 一直是about:blank,并没有改变。

我正在制作的网站刚好也使用了这两者,为了不同时产生两条历史记录,我点击主页面a标签改变hash时,删掉原来的iframe,然后再新建新的iframe,这样一来,只有hash的改变产生的一条历史记录,而iframe不会产生。但是iframe内的页面跳转依然会产生历史记录,但这些跳转并没有改变主页面的hash值,所以每次刷新页面时,只能返回到主页原本的hash值所指定的页面。

我该如何处理呢?(我个人的想法:让iframe的页面跳转 反映到 主页面的hash值改变,当然,我觉得执行顺序是点击iframe内的链接,产生一个变量(当然这个变量应该不是通过iframe的hash值传递,因为这会产生新的历史记录),然后传递给主页面,主页面根据这个变量产生相应的hash值,然后再通过这个hash值,产生iframe的src链接。 )

另外有两个关于QQ音乐网页版的问题:
① 为什么QQ音乐网页版的 iframe的 src一直是 about:blank, 却可以打开不同的页面??
②为什么是hash值的#号 前有个/,这个有什么寓意吗?

spa html5 hash JavaScript

dksnake 9 years, 8 months ago

iframe中的视图不一定是通过http请求url后获取的,也可以是通过其它方式(例如ajax)获取html后替换原视图而成;


 console.log("#/foo/boo".split("/"));//["#","foo","boo"];

老周去叼嗨 answered 9 years, 8 months ago

Your Answer