不带边框的iframe因为能和网页无缝的结合从而不刷新新页面的情况下实现更新页面部分的数据成为可能,可是iframe却不像层那样可以收缩自如,iframe高度需要动态的调整需要JS来配合使用,只能通过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 width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>

或者:

<script language="javascript" 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 ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0"
frameborder="0" scrolling="auto" id="ifm" name="ifm"
onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>

iframe自适应高度的方法的更多相关文章

  1. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  2. iframe自适应高度解决方法 .

    <div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...

  3. 让iframe自适应高度-真正解决

    需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...

  4. [转]让iframe自适应高度-真正解决

    原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...

  5. iframe自适应高度的多种方法小结

    转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...

  6. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  7. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  8. 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js

    一.引入页面几种方法   1.IFrame引入,看看下面的代码    <iframe   frameborder=0   border=0   width=300   height=300    ...

  9. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

随机推荐

  1. [洛谷P4721]【模板】分治 FFT

    题目大意:给定长度为$n-1$的数组$g_{[1,n)}$,求$f_{[0,n)}$,要求: $$f_i=\sum_{j=1}^if_{i-j}g_j\\f_0=1$$ 题解:直接求复杂度是$O(n^ ...

  2. BZOJ5324 & 洛谷4563 & LOJ2545:[JXOI2018]守卫——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5324 https://www.luogu.org/problemnew/show/P4563 ht ...

  3. apache和IIS共享80端口解决办法

    第一步:把iis所发布的网站默认端口由80改为8080:第二步:修改apache的httpd.conf配置文件. 首先,要让apache支持转发也就是做iis的代理那么就要先启 用apache的代理模 ...

  4. cuda环境下安装opencv出现nvcc warning : The 'compute_11'

    警告打印: nvcc warning : The 'compute_11', 'compute_12', 'compute_13', 'sm_11', 'sm_12', and 'sm_13' arc ...

  5. k好数 数位dp

    问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数的数目.例如K = 4,L = 2的时候,所有K好数为11.13.20.22 ...

  6. POJ1236:Network of Schools (思维+Tarjan缩点)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24880   Accepted: 99 ...

  7. 温习js中对象的继承

    温故而知新 XD 1. 关于原型和构造函数的几个知识要点: 使用new 操作符调用构造函数,会经历以下四个步骤: 1.1. 创建一个新对象: 1.2. 将构造函数的作用域赋给新对象(因此 this 就 ...

  8. JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  9. 图论:最短路-Dijkstra

    Dijkstra+堆优化具有稳定的时间复杂度,在一些数据范围要求比较严格(准确来说是图比较苛刻)的时候能够保证稳定的时间复杂度 但是Dijkstra不能够解决负边权的问题,所以在使用的时候一定要仔细读 ...

  10. Item 12 考虑实现Comparable接口

    1.Comparable接口,用来做什么. 2.判定类实现的Comparable接口是否正确的方法. 3.不要扩展一个已经实现了Comparable接口的类来增加用于比较的值组件.     1.Com ...