iframe同域跨域高度自适应的实现
Author:aqy106| Categories:javascript| 发布时间：2011-11-29| 0 条评论|
文档标签：javascript, 前端开发
页面嵌套iframe，相信很多人都会遇到这个问题，本人不喜欢iframe，但项目中遇到了必段要用到，那也没办法，只能折腾，这个是最近项目中用到的解决的个办法，其中的原理是定义一个相同的域名变量，本来只是为实现跨域的iframe高度自适应的，但经试验，该方法可以实现同域或不同域。具体可以自测。
本效果的实现需要父页面和子页面都需要作相应的设置
以下是具体的设置及代码
一、父层页面的设置
1、是父层的iframe引入
- <iframe frameborder="0" scrolling="no" width="100%" src="iframe.html" id="paopaowang"></iframe>
2、父层要设计一个域名的变量 domain
- <script type="text/javascript">
- document.domain = "aqy106.com";
- </script>
二、包含的iframe的设置
在这个页面里，你需要给你的body或用一个容器将iframe中的所有元素包裹，然后添加一个个id
- id="bodybox"
然后再添加以下的脚本代码，其中要注意的是 document.domain = “aqy106.com”; 这里的域名要设置成和父层一样的域名
- <script type="text/javascript">
- document.domain = "aqy106.com";
- function reSetHeight(h, scl) {
- if (!top.document.getElementById("paopaowang")) return;
- with (top.document.getElementById("paopaowang")) {
- if (offsetHeight != h) {
- style.height = h + 'px';
- }
- }
- top.document.body.style.height = top.document.body.scrollHeight;
- if (!scl) {
- if (top.document.documentElement.scrollTop) top.document.documentElement.scrollTop = 0;
- if (top.document.body.scrollTop) top.document.body.scrollTop = 0;
- }
- h=document.getElementById("bodybox").offsetHeight;
- with (top.document.getElementById("paopaowang")) {
- if (offsetHeight != h) {
- style.height = h + 'px';
- }
- }
- }
- window.onload=function(){
- reSetHeight(document.getElementById("bodybox").offsetHeight);
- }
- </script>
具体效果请查看DEMO，点击打开
至此已全部完成，具体代码已很简单明了，可以自行修改和分析，各位具体可以尝试将代码放到同域或不同域中尝试。
但该脚本也有不完美的地方，就是如果iframe页面中有脚本进行操作，改变了iframe页面的高度，父层的页面的iframe的高度无法自动适应，也就只能实现浏览器初次载入能成功获取iframe的高度和加载高度，但在firame中的操作时父层无法实时的适应高度，所以还是有改进的地方的，以后将继续完善。
之前看到过地址栏传参和页面中转的办法也是可行的，所以应该还有其他的办法可以实现，具体日后有空再一并整理上来，如果你还有更好的办法，欢迎赐教。
小弟JS也只是刚学，很多的不懂，发上此帖，只为备忘日后需要使用，感谢你的阅读。
