web

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 本文链接 : https://newbmiao.github.io/2015/10/14/jquery-tabs-with-iframe.html