如何让iframe 自适应子页面的高度

如题所述

方式1:
//注意:下面的代码是放在和iframe同一个页面中调用
$("#iframeId").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});

方式2:
//注意:下面的代码是放在iframe引用的子页面中调用
$(window.parent.document).find("#iframeId").load(function () {
var main = $(window.parent.document).find("#iframeId");
var thisheight = $(document).height() + 30;
main.height(thisheight);
温馨提示:内容为网友见解,仅供参考
无其他回答

怎么让iframe自适应浏览器的高度和宽度
1、首先设置样式:body{margin:0; padding:0;}。2、如果不设置body的margin和padding为0的话,页面上下左右会出现空白。代码如下:<iframe src=:\/\/fulibac id="myiframe" scrolling="no" frameborder="0"><\/iframe>。3、这个方法可以达到让iframe自适应高度的效果,但是如果将窗口放大或缩小效果就...

HTML的frame框架怎么自适应高度?
<script language="javascript">\/\/输入你希望根据页面高度自动调整高度的iframe的名称的列表\/\/用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。\/\/定义iframe的IDvar iframeids=["test"];\/\/如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏...

vue工程中引用iframe,使其高度自适应
通过在mounted函数后延时一秒调用处理函数,我们能够确保iframe内的内容完全渲染完毕,从而准确地获取到页面高度,实现高度自适应。这种解决方案在处理跨域问题或包含动态加载内容的iframe时尤其有效。通过这样的方法,我们成功地解决了iframe高度自适应问题,优化了项目中iframe的使用体验。

怎么让iframe自适应高度
方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个...

怎么让iframe自适应浏览器的高度和宽度
1、在文件夹里创建两个html文件,一个“index”一个“iframe”。2、在index中添加一个iframe标签,直接嵌入iframe页面。3、在iframe网页中添加了两个固定高度的div内容。4、浏览器打开index页面我们发现iframe部分有滚动条,需要滚动显示页面。5、现在我们在index页面的iframe标签再添加如下的属性。6、再次...

什么命令可以使iframe框架里的被引用页面宽高自适应框架宽高?_百度知 ...
思路是js控制iframe自适应高度,因为iframe本身并不能自适应高度,只有写死高度才行,所以要用js判断整个页面内容的高度。给你的代码:<iframe allowtransparency="true" src="你要入引的页面.htm" id="defaulIframePage" name="defaulIframePage" frameborder="0" scrolling="no" width="100%" onload=...

iframe在div中如何自适应高度
window.onload=function(){ (window.onresize=function(){ \/\/获取可见宽度 var width=document.documentElement.clientWidth-180;\/\/180为左边的div的大小 \/\/获取可见高度 var height=document.documentElement.clientHeight-80;\/\/80为头部的div的大小可自己修改 \/\/如果有宽度就给值,if(width>=0){ docume...

iframe的高度可以随内容的多少而变化吗
1、首先在文件夹里创建两个html文件,一个“index”一个“iframe”。2、然后在index中添加一个iframe标签,直接嵌入iframe页面。3、接着在iframe网页中添加了两个固定高度的div内容。4、浏览器打开index页面,发现iframe部分有滚动条,需要滚动显示页面。5、现在在index页面的iframe标签再添加如下的属性。

怎么让iframe的大小跟随内容的大小自动调整?
1.在一个文件夹中创建两个HTML文件,一个“index”和一个“iframe”。2.将iframe标记添加到索引中,并将其直接嵌入到iframe页面中。3.将两个具有固定高度的div内容添加到iframe页面。4.当浏览器打开索引页时,我们发现在iframe的部分有一个滚动条,需要滚动才能显示页面跟踪。5.现在,我们将以下属性...

如何设置iframe高度自适应,在跨域的情况下能做到吗
假设iframe子页面和父页面都在同一域内,通过该脚本可以对给定id的iframe高度进行动态调整。为了防止父页面在子页面之前加载完成,该函数会每隔2秒重新执行一次,一共执行3次。极端情况下子页面的加载速度会慢于父页面,可适当对执行次数和时间做调整。<iframe frameborder="0" width="450" marginheight=...

相似回答