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


相关推荐

  • spring + jdbc + extjs configuration

    spring + jdbc + extjs configuration

    2022年1月30日
    42
  • 3G标准中的TDD与FDD模式

    3G标准中的TDD与FDD模式2000年5月5日,在土耳其举行的ITU-R全会上,通过了包括中国提案在内的五种无线传输技术的规范,渲腥只贑DMA技术,两种基于TDMA技术。  (1)基于CDMA的技术规范  IMT-2000CDMADS(WCDMA、cdma2000DS)IMT-2000CDMATDD(TD-SCDMA、TD-CDMA)  (2)基于TDMA技术的技术规范  IMT-2000CDMASC(u

    2022年5月11日
    42
  • 手把手教你webpack3(9)File-Loader配置简述

    手把手教你webpack3(9)File-Loader配置简述

    2022年3月12日
    41
  • CountDownTimer使用心得及总结[通俗易懂]

    CountDownTimer使用心得及总结[通俗易懂]一、概述项目中经常用到倒计时的功能,比如说限时抢购,手机获取验证码等等。而google官方也帮我们封装好了一个类:CountDownTimer,使我们的开发更加方便;二、APICountDownTimer是一个抽象类,有两个抽象方法,它的API很简单publicabstractvoidonTick(longmillisUntilFinished);//这个是每次间隔指定时间的回调,mill…

    2022年9月18日
    2
  • OHEM[通俗易懂]

    OHEM[通俗易懂]TrainingRegion-basedObjectDetectorswithOnlineHardExampleMining00Astract摘要主要讲了四点:(1)训练过程需要进行参数的空间搜索(2)简单样本与难分辨样本之间的类别不平衡是亟需解决的问题(3)自动地选择难分辨样本来进行训练不仅效率高而且性能好(4)提出了OHEM算法,不仅效率高而且性能好,在各种数据集上表…

    2022年5月7日
    54
  • linux查看端口号命令

    linux查看端口号命令这本阿里 P8 撰写的算法笔记 再次推荐给大家 身边不少朋友学完这本书最后加入大厂 Github 疯传 史上最强悍 阿里大佬 LeetCode 刷题手册 开放下载了 第一种 lsof i 端口号第二种 netstat nltp grep 端口号 a 显示本机所有连接和监听地端口 n 网络 IP 地址的形式 显示当前建立的有效连接和端口 r 显示路由表信息 s 显示按协议的统计信息 v 显示当前有效的连接 t 显示所有 TCP 协议连接情况 u 显示所有 UDP 协议连接情况 i 显示自

    2025年8月11日
    1

发表回复

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

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