【iframe作为子窗口刷新后iframe页面跳转到其它页面怎么办】iframe作为子窗口,刷新后iframe页面跳转到其它页面怎么办

时间:2020-11-27  来源:其它  阅读:

 

在开发网站时,尤其是管理后台,我们经常会使用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中。

那么,我们要如何设置锚点呢?在点击菜单的时候, 调用下面的这个方法,然后我们设置锚点。


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

【iframe作为子窗口刷新后iframe页面跳转到其它页面怎么办】iframe作为子窗口,刷新后iframe页面跳转到其它页面怎么办

http://m.bbyears.com/luyouqishezhi/112974.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新