解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

转载请在页首注明作者与出处

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中的值，所以这样无论怎么刷新，都不会丢失原有的页面了。