iframe中的modal动态为页面添加元素后页面无法滚动

来源：互联网发布：珍珠控台软件编辑：程序博客网时间：2024/06/05 03:48

代码大致结构

<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");  // 代码1mainFrame.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和更好的解决方法，跪求~

0 0