jq 解决iframe高度自适应。

最新推荐文章于 2026-03-27 04:05:51 发布
原创 最新推荐文章于 2026-03-27 04:05:51 发布 · 605 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种使用HTML和jQuery实现页面中iframe元素内容加载完成后自动调整其高度的方法，确保了页面布局的自适应性和用户体验。


<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

 

 

$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

jQuery简单实现iframe的高度根据页面内容自适应的方法
01-19
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考，具体如下： 方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var mainheight = $(this).contents().find(body).height() + 30; $(this).height(mainheight); }); 方式2： //注意：下面的代码是放在iframe引用的子页面中调用 $(window.parent.document).find(#if
教你用jquery实现iframe自适应高度
01-19
iframe代码，注意要写ID 代码如下:<iframe src=”test.html” id=”main” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>jquery代码一： 代码如下://注意：下面的代码是放在test.html调用 $(window.parent.document).find(“#main”).load(function(){ var main = $(window.parent.document).find(“#main”); var thisheight = $(document
jquery实现iframe自适应高度
tingwufeixiang的博客
01-17 989
1、iframe自适应页面高度       首先需要给iframe设置一个id，不需要滚动条则加上scrolling="no"       然后加上一个onload事件function iFrameHeight(iframe) { var ifm= document.getElementById(iframe.id); var subWeb = document.frames
jsjQuery实现iframe高度自适应
shirukai
06-22 545
js/jQuery实现iframe高度自适应 虽然现在前端框架很多，但是有时候还是会需要用到iframe的，在使用iframe的时候，为了美观一点，会尽量避免在父窗口中出现滚动条，在notebook这个项目案例中，也是大量使用了iframe，其中也有高度自适应，下面将用原生js和jQuery两种方法去实现高度自适应。 js代码写在iframe子页面中 //初始化方法 ...
别再只会仿真了！Quartus II 13.1数字时钟项目实战：硬件下载与板级调试避坑指南
最新发布
weixin_30335575的博客
03-27 436
本文详细介绍了Quartus II 13.1在数字时钟项目中的硬件下载与板级调试技巧，涵盖引脚分配、分频电路实现、数码管显示异常排查及SignalTap II在线调试等关键步骤，帮助开发者避免常见错误，提升FPGA开发效率。
jQuery嵌套iframe并实现自适应高度
DevSavantX的博客
10-01 614
在网页开发中，有时候我们需要在一个iframe中嵌套另一个iframe，并且希望内部的iframe能够根据其内容的高度自动调整高度，以确保内容完全显示，而不出现滚动条。在父级页面中，我们需要编写一些JavaScript代码来处理来自内部iframe的消息，并设置外层iframe的高度。当收到来自内部iframe的消息时，我们将其解析为一个数字，并将其作为新的高度值来设置外层iframe的高度。当收到消息时，我们将其解析为一个数字，并将其作为新的高度值来设置内部iframe的高度。在上面的代码中，我们通过。
jQuery js iframe 自适应高度
の原為じ簡單
07-23 242
方法一、jQuery   &lt;script type="text/javascript"&gt; &lt;!-- $(function(){ $("#workArea").load(function(){ var height = $(this).contents().find("#box").height() + 40; ...
iframe视频宽度高度自适应（ pc+移动都可以用，jq写法 ）
游九尘的博客
10-29 1517
* 这个要先去掉，手机端时在加上 *//* 默认隐藏 *//* 关闭按钮 *//* 弹窗内容 */
iframe高度自适应
chuyuan9699的博客
09-14 233
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 ifram...
使用iframe标签时页面内容可以自适应
weixin_43822182的博客
03-19 6365
使用iframe标签时页面内容可以自适应 HTML页面 <iframe src="" frameborder="0" scrolling="no" id="contIframs" onload="setIframeHeight(this)"></iframe> 需引入iframe页面的脚本（父页面） //iframs高度自适应的方法 function setIfr...
通过jq实现iframe自适应高度
chinet_bridge的专栏
10-29 6403
很高兴，终于使用jquery实现了点击外部链接，更改iframe内容时，iframe的高度自适应问题。 失败的测试就不说了，来直接的。 两个链接和iframe： Java代码 "selfinfo.jsp" target="c-c-iframe" title="个人信息" >个人信息   "modifypass.jsp" target=
jquery控制iframe根据内容高度自动调整问题。
chen798213337的博客
02-26 3328
1、问题描述 $(function() {     $("#JmenuFrame").load(function() {         var height = $(this).contents().find("body").height() + 40;         $(this).height(height   }); }); 该段代码实现 jquery控制iframe高度
jquery对iframe自适应高度插件
02-23
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行，不用做任何别的操作完全自动化。
jquery 实现iframe高度自适应
燃烧JAVA
10-03 1431
今天碰到一个问题，页面中使用了iframe，开始的时候设置了高度为100%，发现高度老是很高，不受控制，
jq_jquer获取iframe的高度根据页面内容自适应
橙-极纪元-JJYCheng
06-15 6591
JQ代码 $("#mainframe").load(function () { var if_w = $("iframe").width(); var if_h = $("#mainframe").contents().find("body").find(".nylm2").height(); //alert("if_w==" + if_w + "\n" + "if_h=
js实现自适应浏览器的高度和宽度
☆╮123☆
12-16 1382
超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。 注意别放错地方了哦。 iframe代码，注意要写ID jquery代码１： //注意：下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(f
jQuery设置iframe的高度根据页面内容自适应
Quber
07-15 906
方式1： //注意：下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式...
jquery获得iframe内容的高度
笨鸟快飞的专栏
10-18 4608
html: JS: //初始框架高度 $("#right_frame_h").load(function(){ var mainheight = $(this).contents().find("#right_").height()+30; $(this).height(mainheight); }); #right_frame_h为iframe的ID #right_为if
jquery 控制iframe高度自适应
lenjent的专栏
05-29 7584
jquery 控制iframe高度自适应 在做项目的过程中需要使用iframe，但是iframe默认有一个高度，超过该默认高度的会内容会被隐藏起来，而小于该默认高度的内容呢又会把默认高度当成内容的高度，在经过寻找答案的过程中，找到了怎样去控制iframe高度自适应 1,主窗口main.html   以上代码的意思是：在iframe子窗体中文档加载完了之后，自身ifra
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值