iframe实现的无刷tab页

为了实现tab页无刷,又不想全部用ajax动态生成,同时需要在tab页内有相关操作,简单的话就是用iframe了

先来看个demo: iframe-tabs

参考自jquery-tabs-iframes

这个demo实现了基本的需求,使用中发现还有两点问题

  1. iframe 高度自适应
  2. 如果在iframe页内 history.back(-1) 历史返回时要记录之前选择的tab页
  3. 如果tab页要求实时性,还需要每次点击都请求页面,同时也可以只加载一个iframe并替换其src来复用,而不必每个tab都加载一个iframe

对于问题1:

tabs的高度有统一设置,原demo的高度设置就可以使用,如果是单独针对外部iframe可使用


<script type="text/javascript">
    function iFrameHeight(id) {
        var ifm= document.getElementById(id);
        var subWeb = document.frames ? document.frames[id].document : ifm.contentDocument;
        if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            ifm.width = subWeb.body.scrollWidth;
            //动态设置高度后。避免滚动条滑到最下,要设置滑到顶端
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    }
</script>

对于问题2:

使用localStorage或者sessionStorage可以记录tab选中状态,如果页面有其他唯一性标志,也可以和tab状态一同记录,便于判断是否要还原tab选中状态

下边两个封装好的store.js都便于多平台兼容


//返回时,将记录的tab状态还原
var tabIndex =  0;
//#subContainer为iframe,pageData.unique为页面唯一标识
if ($("#subContainer").length == 0 && store.get('tab')) {
    tabIndex=store.get('tab') ;
    if(tabIndex.split('-')[0]==pageData.unique){
        tabIndex=tabIndex.split('-')[1];
    }
}
var $tabs = $('#tabs').tabs();
$('#tabs').tabs( "option", "active", tabIndex );

//在loadTabFrame()后
store.set('tab', pageData.unique+"-"+(parseInt(tab.split('-')[1])-1));

对于问题3:

将loadTabFrame中添加


if ($("#subContainer").length != 0) {
    $('#subContainer').prop('src', url);
    $('#aOpenOut').prop('href', url);
    //detach来复用
    $(tab).append($('.tabIframeWrapper').detach());
    $(tab).find("iframe").height($(window).height() - 80);
    store.set('tab', pageData.unique+"-"+(parseInt(tab.split('-')[1])-1));
    return;
}

如此,完美解决无刷tab页需求。

如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2015/10/14/jquery-tabs-with-iframe.html