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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • codeblocks怎么设置中文[通俗易懂]

    codeblocks怎么设置中文[通俗易懂]1下载语言包local2将语言包解压后放进新的位置codeblocks里面share的位置例如E:\新建文件夹\codeblocks\CodeBlocks\share\CodeBlocks然后进入codeblocks点击导航条的setting然后点击第二的大图标(视图)在里面选择长条框里选择中文就可以了。重启一下语言包的资源:https://pan.baidu.com/s/1SXYKt…

    2022年7月15日
    80
  • MyEclipse+Tomcat配置详解[通俗易懂]

    MyEclipse+Tomcat配置详解[通俗易懂](尊重劳动成果,转载请注明出处:http://blog.csdn.NET/qq_25827845/article/details/53982209冷血之心的博客)关注微信公众号(文强的技术小屋),学习更多技术知识,一起遨游知识海洋~目录一、Tomcat1 Tomcat概述2 安装、启动、配置Tomcat2.1 Tomcat目录结构2.2 启动和关闭Tomca…

    2022年5月3日
    68
  • 什么是波特率,波特率怎么计算[通俗易懂]

    什么是波特率,波特率怎么计算[通俗易懂]✍什么是波特率,波特率怎么计算➹概述:  ☆简而言之,串口传输的波特率即为每秒钟传输二进制的位数。  ☆脱离枯燥乏味的文字描述,我们用波形和数字来看看波特率是什么吧☟。  ☆说明:系统时钟50M,波特率115200。  基础知识:因果系统时钟-50M时钟周期150∗106{{\rm{1}}\over{{\rm{50*1}}{{\rm{0}}^{\rm{6}}}}}50∗1061​假设1个时钟周期可以计数1次(其实FPGA就是这样)50M时钟1s计数5000

    2022年4月20日
    96
  • Pytest(11)allure报告[通俗易懂]

    Pytest(11)allure报告[通俗易懂]前言allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面。mac环境:

    2022年7月29日
    3
  • 永恒之蓝(MS17010)漏洞kali使用MSF进行漏洞复现

    永恒之蓝(MS17010)漏洞kali使用MSF进行漏洞复现永恒之蓝是指2017年4月14日晚,黑客团体ShadowBrokers(影子经纪人)公布一大批网络攻击工具,其中包含“永恒之蓝”工具,“永恒之蓝”利用Windows系统的SMB漏洞可以获取系统最高权限。恶意代码会扫描开放445文件共享端口的Windows机器,无需用户任何操作,只要开机上网,不法分子就能在电脑和服务器中植入勒索软件、远程控制木马、虚拟货币挖矿机等恶意程序今天就来利用KALI进行漏洞的复现实验准备:1.win7靶机(未打补丁):192.168.1.1412.kali攻击机:192

    2022年5月9日
    400
  • 海量数据处理的 Top K 相关问题

    海量数据处理的 Top K 相关问题

    2021年11月22日
    35

发表回复

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

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