rinald_未来往事

iframe高度自适应 高度随内容动态缩放

WEB前端
iframe高度随页面内容自适应高度,当页面高度变动时iframe高度也自动变化

浏览器兼容:IE6++、Firefox全系列、Chrome全系列、(其他版本浏览器未做测试,期待你测试评论反馈以完善本文,谢谢)

同域环境下实现方法:

方法一:仅修改iframe父页面(iframeA.php),iframe子页面内容(iframeB.php)不用添加其他js或额外代码
iframe父页面(iframeA.php)添加代码如下:

  1. <iframe width="100%" height="0" id="frame_content" src="http://fity.cn/iframeB.php" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
  2. <script type="text/javascript">
  3. function reinitIframe(){
  4. var iframe = document.getElementById("frame_content");
  5. try{
  6. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  7. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  8. var height = Math.max(bHeight, dHeight);
  9. iframe.height = height;
  10. }catch (ex){}
  11. }
  12. window.setInterval("reinitIframe()", 200);
  13. </script>

方法二:修改iframe子页面内容(iframeB.php),iframe父页面(iframeA.php)不需要加入js代码
iframe父页面(iframeA.php)添加代码如下:

  1. <IFRAME border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="http://fity.cn/iframeB.php" frameBorder=0 noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame" ></IFRAME>

iframe子页面(iframeB.php)代码范例如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
  3. <head>
  4. <script language="javascript" type="text/javascript">
  5. function IFrameResize(){
  6. //alert(this.document.body.scrollHeight); //弹出当前页面的高度
  7. var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
  8. //alert(obj.height); //弹出父页面中IFrame中设置的高度
  9. obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
  10. }
  11. window.setInterval("IFrameResize()", 200);//这里的时间可以设置短一些,时间越短高度变动时抖动越不明显
  12. </script>
  13. </head>
  14. <body onload="IFrameResize()">
  15. <div id='main' style='background:#FFF;width:100%;'>
  16. 测试数据
  17. <br/>
  18. 测试数据
  19. <br/>
  20. 测试数据
  21. <br/>
  22. http://fity.cn
  23. </div>
  24. </div>
  25. </body>
  26. </html>
  27. 注意:这里需要定义body onload属性
跨域环境下实现方法:

iframe若是跨域,不能直接用JS来控制,只能通过一个中间代理,我们这里选择在iframe的子页面(iframeB.php)中加一个与iframe父页面(iframeA.php)同域的页面(iframeC.php);这样页面iframeC.php就能和父页面iframeA.php进行无障碍的通讯了;因为子页面iframeB.php页面嵌入iframeC.php,所以页面iframeB.php可以改写页面iframeC.php的href值,这里给出一个例子,假设域名对应文件如下:

iframeA.php 位于http://fity.cn域上
iframeB.php 位于http://www.household114.com域上
iframeC.php 位于http://fity.cn域上

实现方式:
iframeA.php代码:

  1. <iframe id="ifr" src="http://www.household114.com/iframeB.php" height="200" width="400" scrolling="no" frameborder="0" ></iframe>
  2. <script type="text/javascript">
  3. var ifr_el = document.getElementById("ifr");
  4. function getIfrData(data){
  5. ifr_el.style.height = data+"px";
  6. }
  7. </script>

iframeB.php代码:

  1. <style type="text/css">
  2. body {
  3. background: #eee;
  4. }
  5. h1 {
  6. padding: 0;
  7. margin: 0;
  8. font-size: 16px;
  9. }
  10. h2 {
  11. padding: 0;
  12. font-size: 13px;
  13. font-weight: normal;
  14. }
  15. iframe {
  16. visibility: hidden;
  17. }
  18. #box {
  19. height: 220px;
  20. }
  21. </style>
  22. <div id="box">
  23. <button id="btn_auto" type="button">Height Auto: off</button>
  24. <button id="btn_plus10" type="button">Height +10px</button>
  25. <button id="btn_minus10" type="button">Height -10px</button>
  26. </div>
  27. <iframe id="ifr" src="http://fity.cn/iframeC.php" width="0" height="0"></iframe>
  28. <script type="text/javascript">
  29. var box_el = document.getElementById("box"),
  30. btn_auto_el = document.getElementById("btn_auto"),
  31. btn_plus10_el = document.getElementById("btn_plus10"),
  32. btn_minus10_el = document.getElementById("btn_minus10"),
  33. ifr_el = document.getElementById("ifr");
  34. var isAuto = false,
  35. oldHeight = 0,
  36. ifrSrc = ifr_el.src.split("#")[0];
  37. btn_auto_el.onclick = function(){
  38. if(!isAuto){
  39. isAuto = true;
  40. btn_auto_el.innerHTML = "Height Auto: on";
  41. }else{
  42. isAuto = false;
  43. btn_auto_el.innerHTML = "Height Auto: off";
  44. }
  45. }
  46. btn_plus10_el.onclick = function(){
  47. var height = box_el.offsetHeight;
  48. box_el.style.height = (10+height)+"px";
  49. }
  50. btn_minus10_el.onclick = function(){
  51. var height = box_el.offsetHeight;
  52. box_el.style.height = (height-10)+"px";
  53. }
  54. setInterval(function(){
  55. if(isAuto){
  56. var height = document.body.scrollHeight;
  57. height += 20;
  58. if(oldHeight != height){
  59. oldHeight = height;
  60. ifr_el.src = ifrSrc+"#"+oldHeight;
  61. }
  62. }
  63. }, 200);
  64. </script>

iframeC.php代码:

  1. <script type="text/javascript">
  2. var oldHeight = 0;
  3. setInterval(function(){
  4. var height = location.href.split("#")[1];
  5. if(height && oldHeight != height){
  6. oldHeight = height;
  7. if(window.parent.parent.getIfrData){
  8. window.parent.parent.getIfrData(oldHeight);
  9. }
  10. }
  11. }, 200);
  12. </script>

最后值得注意的一点:包含该iframe的div高度值不要设置,iframe的高度值最好也不要设置。

补充一点:iframe子页面submit提交跳转处理

  1. <form name="myform" id="myform" method="post" action="action.php" target="_self" ></form>
  2. 注意:target=“_self”

关于跨域你也可以参考以下其他网络文章:
http://www.ccvita.com/376.html
http://zjuhpp.com/iframe-highly-adaptive.html

原文作者:rinald
原文地址:http://fity.cn/post/423.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

已有2位网友发表了看法:

1L小清新 2014-01-30 19:28:09 回复
新年快乐!!
1Lrinald 2014-02-05 18:03:20 回复
@小清新 谢谢,同乐!

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。