转载请在页首注明作者与出处
http://www.cnblogs.com/zhuxiaojie/p/5990262.html
前言:
在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分。
好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面。
(2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点。
(3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便。
缺点:(1)不利于SEO。
(2)点击浏览器的刷新按钮后,原有的页面丢失,跳转到默认设置好的页面。
因为通常采取iframe的作法会用在菜单多的情况,一般是管理后台,所以不考虑SEO。
那么现在来解决一下第二个缺点,就是刷新页面后,iframe中原有的页面丢失的情况。
一:锚点
我们借助锚点来实现这个功能。至于锚点是什么,它可以标记一个页面中的一个部分,url中以#后面跟随的就是锚点,然后会直接定位到锚点的内容。
http://localhost:8030/#footer
假定上面的footer锚点可直接定位到页尾(当然,这里不介绍怎么定义一个锚点)。
二:思路
思路:因为定位到锚点是不会进行页面的刷新的,假如说我们可以监听url中锚点的变化,是否可以根据这个锚点的内容通过js去设置iframe中的值呢?
答案是可以的。
三:实现
3.1:监听锚点的变化
整个过程实现最为核心的部分就是,要监听到锚点的变化。可以想像,它是一个事件,但是这个事件是比较冷门的,平时都没有听说过这个事件,那就是onhashchange事件
window.onhashchange = function(){ alert("发生变化"); }
要怎么拿到锚点的内容呢?
window.onhashchange = function(){ var hash = location.hash; hash = hash.substring(1,hash.length); alert(hash); }
至于前面为什么要对字符串进行截取,是因为通过location.hash拿到的内容,最前面是#,所以通过substring把#去掉。
3.2:设置iframe地址
既然能监听锚点的变化,又能拿到锚点的值,那么剩下的就简单了。
假定我们锚点的内容就是iframe的url的值,
剩下的代码是
window.onhashchange = function(){ var hash = location.hash; hash = hash.substring(1,hash.length); $("#baseIframe").attr("src","<%=path%>" + url); }
这样就完成了。每当锚点发生变化的时候, 我们就把新的地址设置到了iframe中。
3.3:设置锚点
那么,我们要如何设置锚点呢?在点击菜单的时候, 调用下面的这个方法,然后我们设置锚点。
function loadIframe(url){ var u = window.location.href; var end = u.indexOf("#"); var rurl = u.substring(0,end);
//设置新的锚点 window.location.href = rurl + "#" + url; }
至于为什么又要截取字符串,因为每次获取互的href中,都会有以前的锚点,所以我们需要把以前的锚点给去掉,然后来设置新的锚点。
3.4:当页面载入时设置iframe地址
现在的情况已经很好了,现在每当菜单点击的时候,我们都会设置一次锚点,然后假定我们现在刷新浏览器的页面,但是刷新归刷新,url上面的锚点还是会在的。
我们只要在浏览器加载的时候,设置iframe中的值就可以了。
document.addEventListener('DOMContentLoaded', function () { var hash = location.hash; var url = hash.substring(1,hash.length); $("#baseIframe").attr("src", url); }, false)
我这里要截取字符串的原因,同3.1部分的原因一致,当页面加载完后,就设置iframe中的值,所以这样无论怎么刷新,都不会丢失原有的页面了。