Iframe根据内容自适应高度和宽度

Iframe尤其是不带边框的Iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是Iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给Iframe设置高度的时候多了也不好,少了更是不行。

JS获取高度

我们可以编写下面的函数,最后返回Iframe框架的高度。

function SetCwinHeight(){
    var cwin=document.getElementById("cwin");
    if (document.getElementById){
        if (cwin && !window.opera){
            if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
                cwin.height = cwin.contentDocument.body.offsetHeight;
            else if(cwin.Document && cwin.Document.body.scrollHeight)
                cwin.height = cwin.Document.body.scrollHeight;
        }
    }
}
最后加入Iframe不能丢掉Onload属性,当然了ID也必须也函数中的Cwin匹配

<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>
计算卷去的高度

假设我们的子页面也就是被引入框架的页面有如下的代码,假设这个页面的名称为temp.html

<body onLoad="parent.setSize(getSize())">
<table width="100" height="660" bgcolor="#FFCC66">
  <tr>
    <td></td>
  </tr>
</table>
<div id="PageEnd" style="position:relative"></div>
<script>
function getSize(){
  return document.getElementById("PageEnd").offsetTop
}
</script>
</body>
而我们的主页面可以这样编写

<script language="JavaScript" type="text/JavaScript">
function setSize(theHeight){
  document.all.ifrm.height=theHeight+12;
}
</script>
<iframe id="ifrm" width="100%" height="0px" scrolling="no" src="temp.htm"></iframe>
自适应高度

假设页面中包含iframe的部分代码如下:

<iframe id="test" name="test" frameborder=0 scrolling=no src="/u/1463420203" width="100%" height=0></iframe>
方法一

在页面中加入

<script for=window event=onload language="jscript">
    document.all("test").height=test.document.body.scrollheight;
</script>
自适应宽度类似在Script中加入

document.all("test").width=test.document.body.scrollwidth;
方法二

建立一个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="demo.asp" width="100%"></iframe>
给你网站里所有的被包含文件里面每个都加入

<script language = "JavaScript" src = "bottom.js"/></script>
Iframe自适应高度

输入你希望根据页面高度自动调整高度的iframe的名称的列表,用逗号把每个iframe的ID分隔,例如: [“myframe1”, “myframe2”],可以只有一个窗体则不用逗号。

//定义iframe的ID
var iframeids=["content"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes"

function dyniframesize(){
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
        if (document.getElementByIdx_x){
            //自动调整iframe高度
            dyniframe[dyniframe.length] = document.getElementByIdx_x(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.getElementByIdx_x) && iframehide=="no"){
            var tempobj=document.all? document.all[iframeids[i]] : document.getElementByIdx_x(iframeids[i])
            tempobj.style.display="block"
        }
    }
}

if (window.addEventListener)
    window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
    window.attachEvent("onload", dyniframesize)
else
    window.onload=dyniframesize

时间: 2024-12-23 18:19:55

Iframe根据内容自适应高度和宽度的相关文章

jquery easyui 1.3.4 的datagrid无法自适应高度和宽度,

问题描述 jquery easyui 1.3.4 的datagrid无法自适应高度和宽度, <div class="easyui-tabs" fit="true" border="false"> <div title="用户管理" border="false"> <!-- --> <div id="searchpanel" class="

Div即父容器不根据内容自适应高度的解决方法

解决|自适应 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"><div id="content"></div></div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容

iframe 中动态自适应高度

问题描述 iframe 中动态自适应高度 iframe中的src是动态的 现在想做成自适应高度,百度也找不到合适的方法,我的是ie8, 求各位解答,谢谢了! 解决方案 iframe自适应高度让Iframe自适应高度iframe自适应高度 解决方案二: 跨域没有?跨域了没有搞,没跨域添加onload事件获取加载页面滚动高度设置iframe高度 <iframe onload="resetIframeHeight(this)"... <script> function re

js实现文本框根据输入内容自适应高度

利用jquery 的autoTextarea方法 JS代码,默认的参数及调用:  代码如下 复制代码 //默认的参数 $(".chackTextarea-area").autoTextarea({ maxHeight:220, minHeight:$(this).height() }) 例  代码如下 复制代码 (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null,//文本

文本框根据输入内容自适应高度的代码_表单特效

其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中. 源代码: 23:03文章更新: 感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器! 在线演示: http://demo.jb51.net/js/2011/autoArea/index.htmautoTextarea.js 复制代码 代

javascript原生和jquery库实现iframe自适应高度和宽度_jquery

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh

文本域 textarea:CSS让Textarea文本域根据内容自适应高度fenge文本域

  <title>文本域自适应高度 - www.cxybl.com</title> <textarea style="width:300px;overflow-y:visible">在这里输入一些字符看一下,当超出初设的文本域高度时,文本域自动伸缩变高. 本文链接http://www.cxybl.com/html/wyzz/CSS/20130908/40081.html

Jquery实现textarea根据文本内容自适应高度_jquery

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. autoTextarea.js (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:

利用JS实现iframe 子页面自适应高度

ie6.firefox2 通过, 假设主页面有一个div,里面放置一个iframe<div id="frameBox"><iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0"  scrolling="no">