php页面居中,iframe加载页面，弹出层居中

“iframe加载页面，弹出层居中”涉及到到页面scrollTop值的计算，认清滚动条出自(iframe标签所在的)父页面还是子页面，对计算scrollTop值很关键！

首先我们一般会在父页面添加下面css:

html,body{width:100%;height:100%;overflow:hidden;margin: 0;padding: 0; }

而默认的iframe标签的width、height并不会根据子页面的宽高自适应的，也就是说iframe标签的width、height必须定义。

因此，我们又会添加下面的iframe标签:(注意加粗部分代码)

scrolling="no" 控制iframe引入的子页面(指iframe的src引入的页面)不显示滚动条!

这时你会发现，子页面在父页面中显示的并不完整！ 这是因为iframe标签还加了个height="100%" ,加了这个属性，就意味着父页面高度，会始终等于浏览器窗口的高度，子页面的超出高度部分都会被隐藏掉！

解决方法：把iframe的高度height定义成子页面的高度,比如说子页面height="2000",并去掉html，body下面的样式：

html,body{width:100%;height:100%;overflow:hidden;}

对应iframe标签应也应改写成：

到这里，在父页面看到的滚动条就是父页面自身的滚动条了，弹出层居中关键的scrollTop值=父页面的scrollTop值

假如父页面跟子页面是在2个不同的域名如:

父页面地址：www.aaa.com/xxxx

子页面地址：www.bbb.com/xxxx

在子页面获取父页面的scrollTop值会有个js“跨域”问题，使用js中的top.location来操作父页面会报错，可以通过在iframe src添加url hash的方法来传递父页面的scrollTop值的变通方法来解决这个跨域问题，但需要父页面控制方协助添加相关js片段，处理起来比较棘手，推荐使用下面的方法！

推荐方法：

不要写死iframe标签高度，当浏览器窗口改变时，通过js去实时改写iframe标签高度，使得父页面里面的其它标签元素高度+iframe高度=父页面高度,从而保证父页面的其它内容都能完整显示出来的同时，父页面不会出现滚动条。同时把iframe标签的scrolling="no"去掉，使得在父页面看到的滚动条为子页面的滚动条 ，弹出层居中关键的scrollTop值=子页面的scrollTop值 。这样处理的好处是不会将弹出层的scrollTop值的获取变复杂，不会跟跨域扯上关系。

迟点上代码，解析！