博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe自适应高度的多种方法方法
阅读量:5159 次
发布时间:2019-06-13

本文共 5726 字,大约阅读时间需要 19 分钟。

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:

第一种方法:代码简单,兼容性还可以,大家可以先测试下。

function SetWinHeight(obj) { 

  var win=obj; 
  if (document.getElementById) { 
    if (win && !window.opera) { 
      if (win.contentDocument && win.contentDocument.body.offsetHeight) 
        win.height = win.contentDocument.body.offsetHeight; 
      else if(win.Document && win.Document.body.scrollHeight) 
         win.height = win.Document.body.scrollHeight; 
    } 
  } 

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配 

<iframe width="778" align="center" height="200" id="win" name="win" οnlοad="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> 

 

 

第二种方法

下面的这种也是跟上面的解决方法类似的代码

经典代码 iFrame 自适应高度,在IE6/IE7/IE8/IE9/IE10/Firefox/Opera/Chrome/Safari通过测试。

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

Javascript代码: 

<script type="text/javascript" language="javascript"> 
  function iFrameHeight() { 
    var ifm= document.getElementById("iframepage"); 
    var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; 
    if(ifm != null && subWeb != null) { 
      ifm.height = subWeb.body.scrollHeight; 
    } 
  } 
</script> 

 

第三种方法:这个兼容性更好一些

<script type="text/javascript">

  function dyniframesize(down) {
    var pTar = null;
    if (document.getElementById) {
      pTar = document.getElementById(down);
    } else {
      eval('pTar = ' + down + ';');
    }
    if (pTar && !window.opera) {
      //begin resizing iframe
      pTar.style.display = "block"
      if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
        //ns6 syntax
        pTar.height = pTar.contentDocument.body.offsetHeight + 20;
        //pTar.width = pTar.contentDocument.body.scrollWidth + 20;
      } else if (pTar.Document && pTar.Document.body.scrollHeight) {
        //ie5+ syntax
        pTar.height = pTar.Document.body.scrollHeight;
        //pTar.width = pTar.Document.body.scrollWidth;
      }
    }
  }
</script>

 

第四种方法 iframe解决方案(超简单) 

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的) 

之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下 

1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦) 

parent.document.all("框架ID名").style.height=document.body.scrollHeight; 

parent.document.all("框架ID名").style.width=document.body.scrollWidth; 

这里的 框架ID名 就是Iframe的ID,比如:

<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME> 

2、给你网站里所有的被包含文件里面每个都加入 

<script language = "JavaScript" src = "bottom.js"/></script> 

3、OK,收工! 

在WINXP、IE6下面测试通过。很简单吧! 

实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 (功能升级)

<script type="text/javascript"> 

  //** iframe自动适应页面 **// 
  //输入你希望根据页面高度自动调整高度的iframe的名称的列表 
  //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 
  //定义iframe的ID 
  var iframeids=["test"] 
  //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 
  var iframehide="yes" 
  function dyniframesize() { 
    var dyniframe=new Array() 
    for (i=0; i<iframeids.length; i++) { 
      if (document.getElementById) { 
        //自动调整iframe高度 
        dyniframe[dyniframe.length] = document.getElementById(iframeids); 
        if (dyniframe && !window.opera) { 
          dyniframe.style.display="block" 
          if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape 
            dyniframe.height = dyniframe.contentDocument.body.offsetHeight; 
          else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE 
            dyniframe.height = dyniframe.Document.body.scrollHeight; 
        } 
      } 
      //根据设定的参数来处理不支持iframe的浏览器的显示问题 
      if ((document.all || document.getElementById) && iframehide=="no") { 
        var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) 
        tempobj.style.display="block" 
      } 
    } 
  } 
  if (window.addEventListener) 
    window.addEventListener("load", dyniframesize, false) 
  else if (window.attachEvent) 
    window.attachEvent("onload", dyniframesize) 
  else 
    window.οnlοad=dyniframesize 
</script> 

 

批量iframe自适应

<script language="javascript"> 

  //输入你希望根据页面高度自动调整高度的iframe的名称的列表 
  //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。 
  //定义iframe的ID 
  var iframeids=["test"]; 
  //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏 
  var iframehide="yes"; 
  function dyniframesize() { 
    var dyniframe=new Array() 
    for (i=0; i<iframeids.length; i++) { 
      if (document.getElementById) { 
        //自动调整iframe高度 
        dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
        if (dyniframe[i] && !window.opera) { 
          dyniframe[i].style.display="block"; 
          if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape 
            dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
          else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE 
            dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
        } 
      } 
      //根据设定的参数来处理不支持iframe的浏览器的显示问题 
      if ((document.all || document.getElementById) && iframehide=="no") { 
        var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
        tempobj.style.display="block"; 
      } 
    } 
  } 
  if (window.addEventListener) 
    window.addEventListener("load", dyniframesize, false); 
  else if (window.attachEvent) 
    window.attachEvent("onload", dyniframesize); 
  else 
    window.οnlοad=dyniframesize; 
</script> 

 

转载于:https://www.cnblogs.com/kidming/p/3401395.html

你可能感兴趣的文章
Oracle实例和Oracle数据库(Oracle体系结构)---转载
查看>>
软件业人才结构
查看>>
log4j.properties配置模板
查看>>
C# 拼接字符串的几种方式和性能
查看>>
Linux文件系统挂载管理
查看>>
Java路径
查看>>
Android Webview中解决H5的音视频不能自动播放的问题
查看>>
Android微信SDK API 调用教程【转】
查看>>
Android开发优化之——对Bitmap的内存优化
查看>>
最近的工作感悟
查看>>
JAVA数据类型
查看>>
在ASP.NET MVC中如何预防Cookie的窃取攻击(转载)
查看>>
EL表达式
查看>>
jaeger 使用初探
查看>>
IOS成长之路-Nsstring搜索方法rangeOfString
查看>>
为什么macos开机黑屏但是有声音?
查看>>
现在的心情
查看>>
Python-列表练习
查看>>
Python selenium —— 一定要会用selenium的等待,三种等待方式解读
查看>>
怎样group by一列 select多列
查看>>