解决iframe作为子窗口,刷新后iframe页面跳转到其它页面

在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分。

好处:
(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面。
(2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点。
(3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便。

缺点:
(1)不利于SEO。
(2)点击浏览器的刷新按钮后,原有的页面丢失,跳转到默认设置好的页面。

因为通常采取iframe的作法会用在菜单多的情况,一般是管理后台,所以不考虑SEO。
那么现在来解决一下第二个缺点,就是刷新页面后,iframe中原有的页面丢失的情况。

认识锚点

我们借助锚点来实现这个功能。至于锚点是什么,它可以标记一个页面中的一个部分,url中以#后面跟随的就是锚点,然后会直接定位到锚点的内容。

http://localhost:8030/#footer

假定上面的footer锚点可直接定位到页尾(当然,这里不介绍怎么定义一个锚点)。

思路

思路: 因为定位到锚点是不会进行页面的刷新的,假如说我们可以监听url中锚点的变化,是否可以根据这个锚点的内容通过js去设置iframe中的值呢?

答案是可以的。

实现

1. 监听锚点的变化

整个过程实现最为核心的部分就是,要监听到锚点的变化。可以想像,它是一个事件,但是这个事件是比较冷门的,平时都没有听说过这个事件,那就是onhashchange事件

window.onhashchange = function(){
    alert("发生变化");  
}

要怎么拿到锚点的内容呢?

window.onhashchange = function(){
    var hash = location.hash;
    hash = hash.substring(1,hash.length);
    alert(hash);
}

至于前面为什么要对字符串进行截取,是因为通过location.hash拿到的内容,最前面是#,所以通过substring把#去掉。

2. 设置iframe地址

既然能监听锚点的变化,又能拿到锚点的值,那么剩下的就简单了。
假定我们锚点的内容就是iframe的url的值,剩下的代码是

window.onhashchange = function(){
    var hash = location.hash;
    hash = hash.substring(1,hash.length);
    $("#baseIframe").attr("src","<%=path%>" + url);
}

这样就完成了。每当锚点发生变化的时候, 我们就把新的地址设置到了iframe中。

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中,都会有以前的锚点,所以我们需要把以前的锚点给去掉,然后来设置新的锚点。

4. 当页面载入时设置iframe地址

现在的情况已经很好了,现在每当菜单点击的时候,我们都会设置一次锚点,然后假定我们现在刷新浏览器的页面,但是刷新归刷新,url上面的锚点还是会在的。

我们只要在浏览器加载的时候,设置iframe中的值就可以了。

document.addEventListener('DOMContentLoaded', function () {
     var hash = location.hash;
     var url = hash.substring(1,hash.length);
     $("#baseIframe").attr("src", url);
}, false)

我这里要截取字符串的原因,同 1部分 的原因一致,当页面加载完后,就设置iframe中的值,所以这样无论怎么刷新,都不会丢失原有的页面了。

添加新评论