[前端][fmui]解决使用ep-mui-tabs控件,通过iframe嵌套wps预览出现的问题
问题现象
1、wps预览页未放在首页,上下滑动wps预览页出现闪动问题
2、wps编辑页未放在首页,标题以竖列方式排列,在滚动后恢复正常
解决方案
点击正文tab时动态插入wps预览页或wps编辑页
可参考以下代码:
1、第一步 动态设置tabs控件的数据
var tablist=[];
tablist.push({title:'第一个tab页',content:'<div>第一个tab页内容</div>'})
//wps预览页或编辑页先插入一个空容器
tablist.push({title:'正文',content:'<div id="zw-box"></div>'})
tablist.push({title:'第三个tab页',content:'<div>第三个tab页内容</div>'})
epm.get(tabs控件id).setData(tablist)
2、第二步 监听ep-mui-tabs控件值改变事件,第一次点击时初始化内容
epm.get('tabs').on('valuechanged',function(e){
if(e.title==='正文'&&!document.getElementById('zw')){
var previewUrl = 'wps预览页或编辑页链接'
document.getElementById('zw-box').innerHTML = '<iframe id="zw" src="'+ previewUrl +'" width="100%" height="100%"></iframe>';
}
})