iframe自适应高度_html页面自适应

iframe自适应高度_html页面自适应为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢?下面这个办法就是使用javascript实现iframe高度自适应的,这个可是兼容所有浏览器的,ie,f…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢?下面这个办法就是使用javascript实现iframe高度自适应的,这个可是兼容所有浏览器的,ie,firefox,chrome,opera,safari这些浏览器都能够实现iframe高度自适应的,具体的js代码如下:function dyniframesize(down){

var Sys={};

var ua=navigator.userAgent.toLowerCase();

var s;

(s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:

(s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:

(s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:

(s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:

(s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;

var pTar=null;

if (document.getElementById){

pTar=document.getElementById(down);

}else{

eval(‘pTar=’+down+’;’);

}

pTar.style.display=”block”;

if (Sys.ie){

if(Sys.ie==’9.0′){

pTar.height=pTar.contentWindow.document.body.offsetHeight+15+”px”;

pTar.width=pTar.contentWindow.document.body.scrollWidth+”px”;

}else if(Sys.ie==’8.0′){

pTar.height=pTar.Document.body.offsetHeight+15+”px”;

pTar.width=pTar.Document.body.scrollWidth+”px”;

}else{

pTar.height=pTar.Document.body.scrollHeight+25+”px”;

pTar.width=pTar.Document.body.scrollWidth+”px”;

}

}

if (Sys.firefox){

pTar.height=pTar.contentDocument.body.offsetHeight+15+”px”;

pTar.width=pTar.contentDocument.body.scrollWidth+”px”;

}

if (Sys.chrome){

pTar.height=pTar.contentDocument.body.offsetHeight;

pTar.width=pTar.contentDocument.body.scrollWidth;

}

if (Sys.opera){

pTar.height=pTar.contentDocument.body.offsetHeight;

pTar.width=pTar.contentDocument.body.scrollWidth;

}

if (Sys.safari){

if(pTar.contentDocument.body.offsetHeight <= ‘186’){

pTar.height=pTar.contentDocument.body.offsetHeight+10;

}else{

pTar.height=pTar.contentDocument.body.offsetHeight;

}

pTar.width=pTar.contentDocument.body.scrollWidth;

}

}

具体的使用方法如下(设置id=phpernote的iframe的高度自适应iframe里面的内容高度):

style=”border:0px;background:#FFF;max-height:245px;

” scrolling=”no” src=”http://www.phpernote.com/comm/page/218167″ id=”phpernote” οnlοad=”javascript:dyniframesize(‘phpernote’);”>

上篇文章我们介绍了如何使用iframe属性,这篇文章也依然教大家iframe自适应高度的解决办法,希望两篇文章让你对iframe标签有一个更深入的了解。

相关推荐:

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182849.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 基于PyTorch的深度学习入门教程(一)——PyTorch安装和配置

    前言深度神经网络是一种目前被广泛使用的工具,可以用于图像识别、分类,物体检测,机器翻译等等。深度学习(DeepLearning)是一种学习神经网络各种参数的方法。因此,我们将要介绍的深度学习,指的是构建神经网络结构,并且运用各种深度学习算法训练网络参数,进而解决各种任务。本文从PyTorch环境配置开始。PyTorch是一种Python接口的深度学习框架,使用灵活,学习方便。…

  • GPS 数据格式

    GPS 数据格式GPS数据格式GPRMC(建议使用最小GPS数据格式)$GPRMC,,,,,,,,,,,1)标准定位时间(UTCtime)格式:时时分分秒秒.秒秒秒(hhmmss.sss)。2)定位状态,A=数据可用,V=数据不可用。3)纬度,格式:度度分分.分分分分(ddmm.mmmm)。4)纬度区分,北半球(N)或南半球(S)。5)经度,格式:度度分分.分分分分

  • 解决CSDN富文本编辑器回车换行间距过大

    解决CSDN富文本编辑器回车换行间距过大在CSDN富文本编辑器中直接按回车(Enter)换行后文本间距会很大,解决方法是同时按住Shift+Enter,换行后间距就会很小!如下图所示:原理:Enter产生硬回车,它在换行的同时也起着段落分隔的作用。Shift+Enter产生软回车,它换行,但是并不换段,即前后两段文字在Word中属于同一“段”。…

  • Redis – 11、集群(Cluster)

    Redis – 11、集群(Cluster)redis集群是对redis的水平扩容,即启动N个redis节点,将整个数据分布存储在这个N个节点中,每个节点存储总数据的1/N。

    2022年10月25日
  • 防火墙

    防火墙

  • js保留两位小数四舍五入_parsefloat保留两位小数

    js保留两位小数四舍五入_parsefloat保留两位小数一、我们首先从经典的“四舍五入”算法讲起1、四舍五入的情况 1 2 varnum=2.446242342; num=num.toFixed(2);//输出结果为2.45 2、不四舍五入第一种,先把小数边整数: 1 Math.floor(15.7784514000*100)/100//输出结果为15.77 第二种,当作字符串,使用正则匹配: 1

发表回复

您的电子邮箱地址不会被公开。

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