iframe自适应高度_iframe根据内容自适应高度

iframe自适应高度_iframe根据内容自适应高度1、iframe自适应页面高度   首先需要给iframe设置一个id,不需要滚动条则加上scrolling=”no”   然后加上一个onload事件functioniFrameHeight(iframe){ varifm=document.getElementById(iframe.id); varsubWeb=document.frames

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

Jetbrains全系列IDE稳定放心使用

1、iframe自适应页面高度

      首先需要给iframe设置一个id,不需要滚动条则加上scrolling=”no”

      然后加上一个onload事件

function iFrameHeight(iframe) {   
	var ifm= document.getElementById(iframe.id);   
	var subWeb = document.frames ? document.frames[iframe.id].document : ifm.contentDocument;   
	if(ifm != null && subWeb != null) {
	   ifm.height = subWeb.body.scrollHeight;
	   ifm.width = subWeb.body.scrollWidth;
	}   
} 

<iframe src=' ' width='100%'  id="compInfo" frameborder='0'scrolling="no"  οnlοad="iFrameHeight(this)"></iframe>

2、若需要iframe固定一个高度,超过这个高度才自适应

function iFrameHeightContact(iframe) {   
	var ifm= document.getElementById(iframe.id);   
	var subWeb = document.frames ? document.frames[iframe.id].document : ifm.contentDocument;   
	if(ifm != null && subWeb != null) {
		var ifmHeight = subWeb.body.scrollHeight;
		var ifmWidth = subWeb.body.scrollWidth;
		if(ifmHeight<400){
			ifm.height = 400;
			ifm.width = ifmWidth;
		} else {
			ifm.height = ifmHeight;
			ifm.width = ifmWidth;
		}
	   
	}   
} 

<iframe src=' ' width='100%'  id="compInfo" frameborder='0'scrolling="no"  οnlοad="iFrameHeight(this)"></iframe>

* 400则为你想要固定的高度


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

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

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


相关推荐

  • 【STM32】HAL库 STM32CubeMX教程九—ADC[通俗易懂]

    【STM32】HAL库 STM32CubeMX教程九—ADC[通俗易懂]前言:本系列教程将对应外设原理,HAL库与STM32CubeMX结合在一起讲解,使您可以更快速的学会各个模块的使用所用工具:1、芯片:STM32F407ZET6/STM32F103ZET62、STM32CubeMx软件3、IDE:MDK-Keil软件4、STM32F1xx/STM32F4xxHAL库知识概括:通过本篇博客您将学到:ACD工作原理STM32CubeMX创建…

    2022年10月21日
    6
  • Redis的缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级

    Redis的缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级

    2021年4月10日
    132
  • 【图解算法面试】记一次面试:说说游戏中的敏感词过滤是如何实现的?

    【图解算法面试】记一次面试:说说游戏中的敏感词过滤是如何实现的?版权声明:本文为苦逼的码农原创。未经同意禁止任何形式转载,特别是那些复制粘贴到别的平台的,否则,必定追究。欢迎大家多多转发,谢谢。小秋今天去面试了,面试官问了一个与敏感词过滤算法相关的问题,然而小秋对敏感词过滤算法一点也没听说过。于是,有了下下事情的发生…面试官开怼面试官:玩过王者荣耀吧?了解过敏感词过滤吗?,例如在游戏里,如果我们发送“你在干嘛?麻痹演员啊你?”,由于“麻痹”是一个敏感词,…

    2022年5月1日
    56
  • python3 byte转string[通俗易懂]

    python3 byte转string[通俗易懂]python3许多stdout的类型是byte。如果想要print,则需要转换一下。p=subprocess.Popen(cmd,shell=True,stdout=subprocess.PIPE,stderr=subprocess.PIPE)(stdout,stderr)=p.communicate()print(stdout.decode("gb2312"))print(s…

    2022年6月16日
    39
  • 开心农场最新外挂助手下载[通俗易懂]

    开心农场最新外挂助手下载[通俗易懂] “开心农场”辅助外挂使用说明:1.解压缩文件(本文件完全解压后只有876KB不占用多余空间)2.打开 这个图标www.vi128.com3.这时,在右下角会出现这个标志 然后双击它4.出现一个新的笔记5.在笔记主框内写上好友的名字(如果不好找也可以再加上编号)和将要成熟的作物6.写好后点击 右上角这个蓝色小闹钟的图标 7…

    2025年11月6日
    3
  • 无线网络规划与设计案例_无线网络的发展前景

    无线网络规划与设计案例_无线网络的发展前景无线网络规划与设计随着WLAN技术的成熟和终端的普及,WLAN网络承载的业务与应用逐渐丰富,为越来越多的终端用户所喜爱,各大运营商与企业也不断加大对WLAN网络建设的投入,在各热点楼宇(写字楼、酒店、机场等)规划部署WLAN网络,以满足终端用户不断上涨的业务需求。本文将对无线网络的规划设计原则加以总结和分析,可作为无线网络部署的指导意见。无线网络规划与设计当前WLAN网络采

    2022年9月28日
    3

发表回复

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

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