代码大致结构
<body>
<iframe id="mainFrame" style="width:100%;height:100%;">
<div id="content"></div>
<button>打开模态框在content中添加元素</button>
<div id="addElementWindow" ...bootstrap模态框代码略...></div>
</iframe>
</body>
当为id为content的div内添加元素,且div的高度超过iframe的高度后,发现iframe无法滚动了!试了下firefox正常,safari、chrome异常,这是什么bug。。。
后来发现,只要拖动下窗口,让iframe的高度出现变化,就再次能够滚动了。
不得已,只好在模态框隐藏的时候强制修改iframe的高度:
$("#addElementWindow").on("hidden.bs.modal", function () {
var mainFrame = $("#mainFrame");
var height = mainFrame.height();
mainFrame.css("height",height+1+"px"); // 代码1
mainFrame.css("height",height+"px"); // 代码2
})
看似没问题,执行起来居然没效果,我试着去掉代码2,高度加1像素后不复原,chrome生效了。这太诡异了,代码1+2速度太快了浏览器渲染跟不上了?
但是不能每增加一次空间,就给iframe加一个像素高度吧?于是可以在打开模态框的时候+1像素,关闭的时候-1像素,但是觉得这样导致页面抖动,不太好,于是用了animate凑合了:
$("#addElementWindow").on("hidden.bs.modal", function () {
var mainFrame = $("#mainFrame");
var height = mainFrame.height();
mainFrame.animate({height:height+1},1);
mainFrame.animate({height:height},1);
})
如果有朋友知道这个bug和更好的解决方法,跪求~