经过iframe实现页面的局部刷新

一个网站是由许许多多页面组成的，超连接将这些页面链接起来，给了用户一个完整的使用体验。用户经过超连接打开一个页面时，浏览器会回收当前页面而后再渲染新页面。有时候咱们并不但愿是这样，好比对于一个音乐网站，咱们不但愿用户在切换页面时中断当前歌曲的播放。这就须要作到页面的刷新是局部而不是所有。目前大概有两种方法能够实现这种功能。一是将整个网站作成只有一个页面，模块切换彻底靠客户端的js实现；二是经过嵌套iframe的方式实现。iframe方式虽然传统，可是和单页面应用相比也有许多优点。好比：内存通常不会泄漏，seo很方便等。本文将主要介绍iframe的实现方式。

如上图，在最外层的页面嵌套一个iframe，经过改变iframe的src值来实现页面的切换。咱们能够将站内全部连接的target值设为iframe。因为iframe是一个独立的浏览器窗口，其切换并不会刷新其外层的容器，这样就实现了页面局部刷新的效果。效果是达到了，不过还存在一个问题，那就是页面的URL不能体如今浏览器的地址栏里，这样的用户体验是很是差的。浏览器的地址栏表示的是最外层页面的地址，若是改变这个地址就会形成整个页面的刷新。不过好在浏览器为URL增长了hash部分。hash并非http协议的内容，只是在客户端使用的，hash的改变不会刷新页面。因此在外层，能够用hash来体现iframe页面的地址。好比iframe的地址为http://a.b.com/user?id=123 ，那么转换到浏览器地址栏多是http://a.b.com/#/user?id=123。 经过简单的改动就能实现此功能。

上面的流程图反映了一次页面跳转的过程。在iframe中，须要实现一个全局的点击事件代理，将全部连接的点击事件拦截下来。拦截后，将连接href值转换成hash地址，并修改外层src值。外层src值改变后，会触发hashchange事件，在该事件处理函数中将hash地址再次转换成页面真实地址并刷新iframe。这里有个细节须要注意，刷新iframe时，不能直接设置src值或者location.href的值，由于这会使得iframe也相应产生一条历史记录，这回致使浏览器的前进后退须要点两次才生效。经过调用location.replace()方法能够避免iframe产生历史记录。不过该方法在ie10+浏览器下有个严重的bug。使用浏览器的前进和后退键时会致使全部页面的刷新，这就破坏了局部刷新的需求了。这应该是浏览器实现上的一个bug，没有办法直接解决，不过能够用其余方法绕过去。避免iframe产生历史记录的方法还有一种，就是在刷新iframe时，先要将原来的iframe节点删除，而后建立一个新的iframe节点，并将其src设为对应地址。此时iframe的刷新就不会产生多余的历史记录了。

能够看到内嵌iframe的方式实现是比较简单的，关键的一点就是要把浏览器的历史记录问题处理好。但愿本文提供的信息能有所帮助。