iframe 自适应高度的多种实现方式

iframe 自适应高度的多种实现方式iframe高度自适应内容需求:实现iframe的自适应高度,能够随着页面的长度自动的适应以免除页面和iframe同时出现滚动条的现象。设置iframe自适应高度,使其等于内嵌网页的高度

大家好,又见面了,我是你们的朋友全栈君。

iframe高度自适应内容

需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。  

设置iframe 自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

 

一、iframe内容未知,高度可预测

这个时候,我们可以给它添加一个默认的css的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:

function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
 
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};

  

 

只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染html代码,建议使用上面的代码。

 

二、多个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.onload=dyniframesize;
</script>

  

 

三、针对知道的iframe的ID调用

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

  

 

四、内容宽度变化的iframe高度自适应

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/JavaScript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

  

新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html

五、跨域下的iframe自适应高度

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

a.html中包含iframe:·

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no"></iframe>

  

在c.html中加入如下代码:

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" ></iframe>
<script type="text/JavaScript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
})();
</script>

  

最后,agent.html中放入一段js:

<script type="text/JavaScript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>

  

agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155470.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • PLSQL注册码(永久可用)[通俗易懂]

    PLSQL注册码(永久可用)[通俗易懂]点击链接查看:http://note.youdao.com/noteshare?id=c2bdd7bf1e1478a2470267f58eada964&amp;sub=10C22AEFB67B452CBAD539DA126DC821

    2022年7月13日
    40
  • 数据库备份一张表

    数据库备份一张表数据库备份表备份方案一:备份createtable[备份名]asselect*from[表名];恢复truncatetableorg_group;insertintoorg_groupselect*from[备份名];说明此种情况适用于,同一个数据库,需要备份某张表。备份方案二:备份oracle用户终端执行:exp[用户名]/[密码]tables=[表一],[表二]file=/home/oracle/table.dmp恢复

    2022年5月14日
    122
  • python浮雕图片_用Python来画浮雕画

    python浮雕图片_用Python来画浮雕画浮雕艺术在世界各地都可以见到,中国古代在唐朝以来就有许多浮雕效果的东西,很多的大型纪念性建筑都有这种作为装饰,常见的有花窗,龙柱等。简单的来说,浮雕就是把所要呈现的图像突起于石头表面,根据凹凸的程度不同从而形成三维的立体感。用Python画一张浮雕画,那就进行类似的原理,通过勾画图像的轮廓,并且降低周围的像素值,那就可以产生一张具有立体感的浮雕效果图片。我们可以采用相邻像素相减的方法来得到轮廓与平…

    2022年6月20日
    31
  • c++ int、long long 转string int转wstring

    c++ int、long long 转string int转wstringint、longlong转stringint转wstring

    2022年5月15日
    107
  • Oracle 12.1.0.2 对JSON的支持

    Oracle 12.1.0.2 对JSON的支持

    2022年3月3日
    63
  • 如何利用matlab画三维图_平面图怎么画

    如何利用matlab画三维图_平面图怎么画引言本人是一位数学科研工作者,平时的文章采用的是latex编写,里面图形的生成主要来自于Matlab(个人对Matlab非常喜欢,感觉上手比较容易,更亲民)。对于图形的处理比较频繁,而且总会有一些特殊的需求,每次都要上网搜查,或者查以前用过的命令,经常花了很多时间,实现了一点小要求,事后回想有点得不偿失。因此借助这个平台,记录自己在Matlab使用过程中碰到的一些问题,给出我找到或者知道的解决办法,不过方法不是唯一的,也希望广大网友能有更好的思路提供。后续碰到的问题我也会继续更新(如果我有时间的话哈)。

    2022年10月11日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号