选项卡可不可以增加iframe模式

用iframe代替多子webview形式的tabbar在浏览器的兼容处理方法：

复制代码var createIframe = function (el, opt) {  
    var elContainer = document.querySelector(el);  
    var wrapper = document.querySelector(".mui-iframe-wrapper");  
    if(!wrapper){  
        // 创建wrapper 和 iframe  
        wrapper = document.createElement('div');  
        wrapper.className = 'mui-iframe-wrapper';  
        for(var i in opt.style){  
            wrapper.style[i] = opt.style[i];  
        }  
        var iframe = document.createElement('iframe');  
        iframe.src = opt.url;  
        iframe.id = opt.id || opt.url;  
        iframe.name = opt.id;  
        wrapper.appendChild(iframe);  
        elContainer.appendChild(wrapper);  
    }else{  
        var iframe = wrapper.querySelector('iframe');  
        iframe.src = opt.url;  
        iframe.id = opt.id || opt.url;  
        iframe.name = iframe.id;  
    }  
}

调用也很简单：

复制代码//当前激活选项  
var activeTab = subpages[Index],title=document.querySelector(".mui-title");  
mui('.mui-bar-tab').on('tap', 'a', function(e) {  
    // 获取目标子页的id  
    var targetTab = this.getAttribute('href');  
    if (targetTab == activeTab) {  
        return;  
    }          
    // 更换标题  
    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;      
    // 子页内容切换  
    if(mui.os.plus){  
        // 显示目标webview  
        plus.webview.show(targetTab);  
        // 隐藏当前webview  
        plus.webview.hide(activeTab);  
        // 更改当前活跃的选项卡  
        activeTab = targetTab;  
    }else{  
        // 创建iframe代替子页面  
        createIframe('.mui-content',{  
            url: targetTab,  
            style: {  
                top: '45px',//设置距离顶部的距离  
                bottom: '50px'//设置距离底部的距离  
            }  
        });  
    }  
})

可以参考一下这个demo：
预览地址：
https://rawgit.com/zhaomenghuan/mui-demo/master/example/tabbar-with-iframe/tab-webview-main.html
下载地址：
https://github.com/zhaomenghuan/mui-demo/

都没有遇到这个问题么