Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >iframe自适应高度和宽度[通俗易懂]

iframe自适应高度和宽度[通俗易懂]

作者头像
全栈程序员站长
发布于 2022-11-04 03:56:57
发布于 2022-11-04 03:56:57
3.9K00
代码可运行
举报
运行总次数:0
代码可运行

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

iframe自适应高度和宽度可以通过onload事件来操作,如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<iframe id="iframe-5566" name="iframe-5566" frameborder="0" width="100%" height="98%" style="display:none" οnlοad="iframLoad(this)">                    
                    </iframe>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function iframLoad(ifm){ 
		try{		
			$(ifm).height(ifm.contentWindow.document.body.scrollHeight);
			$(ifm).width(ifm.contentWindow.document.body.scrollWidth);
		}catch(e){
			$(ifm).height(320);//默认高度
			$(ifm).width(320); //默认宽度
		}
	}	

但是 如果 iframe的高度是动态的呢?…我们可以在子页面内做这样的回调:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function autosize(){
		var ifm = parent.document.getElementsByName(window.name)[0];
		parent.iframLoad(ifm) ;
	}

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iframe自适应高度_iframe根据内容自适应高度
首先需要给iframe设置一个id,不需要滚动条则加上scrolling=”no”
全栈程序员站长
2022/11/08
5.1K0
iframe 自适应高度的多种实现方式
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
全栈程序员站长
2022/09/06
7.7K0
iframe的高度自适应_div自适应高度
大家好,又见面了,我是你们的朋友全栈君。 Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html
全栈程序员站长
2022/11/04
7.2K0
iframe自适应高度和宽度_自适应框架
var ifm_content = document.getElementById(“conFrame”);
全栈程序员站长
2022/11/19
2.9K0
iframe自适应高度 原
同时总结下经常用的高度           contentWindow   兼容各个浏览器,可取得子窗口的 window 对象。             contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。             document.body.clientWidth  可见区域内容的宽度(不包含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.clientHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.offsetWidth  可见区域内容的宽度(含边框,如果水平有滚动条,不显示全部内容的宽度)           document.body.offsetHeight 全部内容的高度(如果垂直有滚动条,也显示全部内容的高度)           document.body.scrollWidth  内容的宽度(含边框,如果有滚动则是包含整个页面的内容的宽度,即拖动滚动条后看到的所有内容)           document.body.scrollHeight 全部内容的高度
tianyawhl
2019/04/04
2.3K0
iframe标签属性说明 详解[通俗易懂]
Iframe 标签详解<Iframe src=”example.htm” width=”300″ heitht=”100″></IFRAME> example.htm 是被嵌入的页面,标签 <IFRAME> 还有一些可用的参数设置如下: marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth=”20″,单位是 pix,下同。 marginheight:网页中内容在表格顶部预留的高度; hspace:网页右上角的的横坐标; vspace:网页右上角的纵坐标; frameborder:是否显示边缘;填”1″表示”是”,填”0″表示”否” scrolling:是否出现滚动条;填”1″表示”是”,填”0″表示”否” 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢?下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下: name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度(可用像素值或百分比) frameborder:内嵌帧边框 marginwidth:帧内文本的左右页边距 marginheight:帧内文本的上下页边距 scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示) src:内嵌入文件的地址 style:内嵌文档的样式(如设置文档背景等) allowtransparency:是否允许透明 明白了以上属性后,我们可用以下代码实现,在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中 让iframe自动适应内容的高度
全栈程序员站长
2022/08/01
3.5K0
JavaScript 处理Iframe自适应高度的问题
 用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。
aehyok
2018/09/11
1.6K0
不使用定时器实现iframe的自适应高度
在微博上看到有人提及不使用定时器实现iframe自适应(onReadyStateChange + onLoad + onResize + onDOMSubtreeModified),然后就去折腾了,这篇与之前的文章:《不使用定时器实现onhashchange》有点类似
meteoric
2018/11/15
2.2K0
让动态的 iframe 内容高度自适应
注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的
书童小二
2018/09/03
6.8K0
让动态的 iframe 内容高度自适应
iframe关闭父页面(iframe嵌套https页面)
width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frames[name]获取到frame scrolling iframe里面的页面是否可以滚动 frameborder 是否显示iframe边框 1(显示)0(不显示) id 和其他的html标签id一样 在主页面中通过iframe标签可以引入其他子页面
全栈程序员站长
2022/07/25
6.9K0
解决iframe高度自适应
iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题。
全栈程序员站长
2022/11/17
2.5K0
JavaScript自动设置IFrame高度(兼容各主流浏览器)
调用方式如下 <iframe id="ifm" name="ifm" onload="SetIFrameHeight('ifm')" src="http://www.qq.com" /> function SetIFrameHeight(down) {         var Sys = {};         var ua = navigator.userAgent.toLowerCase();         var s;         (s = ua.match(/msie ([\d.]+)/)) 
aehyok
2018/09/11
7830
自适应页面高度
      困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不同。不过非常遗憾,网上的文章可谓无数,但基本都不能解决问题。基本上是这两类:       1、页面中嵌了IFrame,希望Iframe不出现滚动条,大小刚刚和页面大小一样,这个基本方法,都是用页面的document.body.scrollHeight属性来完成的。其实我也是用Iframe,因为我的折叠菜单是用css+div实现的,没法用滚动条,所有我
用户1075292
2018/01/23
2.7K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/08/21
6.9K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
真正解决iframe高度自适应问题
拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。
yuezhongbao
2019/02/26
5.4K0
如何实现iframe(嵌入式帧)的自适应高度
好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用
Java架构师必看
2021/03/22
1.2K0
【HTML】iframe跨域访问问题
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。 1.问题重现: Chrome 版本 41.0.2272.10
悟空聊架构
2018/05/18
4.7K0
jquery 实现iframe 自适应高度
超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错地方了哦。
李维亮
2021/07/09
2.6K0
iframe属性与用法
虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公司正在使用它。
全栈程序员站长
2022/07/22
3K0
iframe属性与用法
html中嵌入iframe进行父子页面参数传递[通俗易懂]
1.父页面调用子页面函数,选择iframe的id + contentWindow +子页面的函数名([参数列表])
全栈程序员站长
2022/09/14
3.4K0
相关推荐
iframe自适应高度_iframe根据内容自适应高度
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验