js实现页面iframe高度自适应

dinphi dinphi 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 554平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄18年
关注
原创 最新推荐文章于 2026-03-25 00:43:29 发布 554 阅读 AI 写同款· GEO 优化 ›
让iframe网页在各种浏览器下自动适应大小的JavaScript技巧 当我们在网页中使用iframe框架嵌入其他网页时，经常会遇到一个问题：如何让嵌入的网页在不同的浏览器和设备上自动适应大小，以确保内容能够完全显示而不产生滚动条呢？需要注意的是，由于浏览器的同源策略限制，上述代码只适用于嵌入同源（即与父页面同源）的网页。如果嵌入的网页与父页面不同源，浏览器将限制对嵌入网页的访问，从而导致上述代码无法正常工作。这样，当嵌入网页加载完成后，JavaScript代码将自动计算出内容的高度，并将其应用于iframe元素，从而实现了自动适应大小的效果。属性，以实现自动适应大小的效果。 阅读详情

 <iframe src="${createLink(controller: "main",action: "nonPayment")}" width="740" scrolling="no" frameborder="0" name="iframe"  id="iframe" onload="iframeHeight(this)"></iframe>


function iframeHeight(obj){

        var subweb=obj.contentDocument;
        if(subweb!=null){
            obj.height=subweb.body.scrollHeight;
        }else{
            obj.height=document.getElementById('iframe').contentWindow.document.body.scrollHeight
        }
    }
收录于
JavaScript

当前文章被收录于：

JavaScript
2 篇文章 0 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
AutoGLM-Phone 实现“豆包 AI 手机”的自动化操作手机的实战方案教程 让普通手机秒变ai手机 是一个基于视觉语言模型（VLM）的 AI 手机智能助理框架。❌ 不依赖固定坐标❌ 不需要提前录制脚本✅ 能“看懂”手机屏幕✅ 能理解自然语言指令✅ 能自动规划操作路径并执行让 AI 像人一样看屏幕、想步骤、点手机。从工程角度看，AutoGLM-Phone 已经具备“AI 手机助理”的完整雏形能看能理解能规划能执行能跨 App所谓的「豆包 AI 手机」，本质上就是这类能力的产品化封装。而现在，这套能力已经可以被普通开发者亲手跑起来、改起来、甚至接入自己的业务场景。 阅读详情

相关推荐

5分钟搞定！用FunASR在本地快速部署达摩院Paraformer语音识别模型

本文提供了一份快速部署指南，教你如何在5分钟内利用FunASR工具包在本地电脑上启动达摩院Paraformer语音识别模型。Paraformer作为一款非自回归端到端模型，以其推理速度快、识别精度高的特点，结合FunASR的一键式模型加载和统一API，让开发者能轻松构建本地语音识别系统，极大降低了前沿AI技术的应用门槛。

q9w8e7r6t5的博客 605

css、js（vue）进行textarea自适应高度（超详细说明）

css、js（vue）进行textarea自适应高度（超详细说明）

weixin_44784401的博客 1万+

【加密社】私钥碰撞器，秒杀市面上的碰撞器

基于上述的逻辑和代码，开发了ETH挖掘器（图1.1）这里有个亮点是：1.很多开发者在判断地址是否有效的环节上，用的是查询余额，其实这是不对的，查询余额你可能只能查询对应代币的余额，例如usdt，eth等但是如果用查询交易次数就不一样了，你只要是交易过，我就认为是有效钱包，这样的速度比查询余额要快，也要更准确。2.rpc节点可配置。

加密社的博客 1580

[Javascript][JS]iframe高度自适应(原创)

开发作者：Jackie Law 开发时间：2021-08-04 开发语言：Javascript 浏 览 器：Microsoft Edge(版本 92.0.902.62 ) 场景说明： 1.有A.html与B.html两个页面； 2.A.html里包含了B.html的内容(B.html通过iframe嵌套在A.html里，设iframe的ID为"iframe001"); 3.B.html的内容高度不固定； 4.A.html里包含B.html的iframe出现滚动条； 场景需求 1.让A.html页面里的ifr

只会C#的程序猿 861

手把手教你用TUSB2E22中继器实现eUSB2与USB 2.0互转（附实测数据对比）

本文详细介绍了如何利用TUSB2E22中继器实现eUSB2与USB 2.0的高效互转，包括技术背景、硬件设计要点、信号完整性测试方法及故障排查策略。通过实测数据对比，展示了TUSB2E22在信号延迟、功耗和眼图性能上的显著优势，为工程师提供了实用的工程方案。

weixin_29199873的博客 283

Ai数字人直播系统源码部署

虚拟形象定制，直播内容智能生成，多语言支持，智能互动，声音克隆，24 小时不间断直播，多平台直播，智能数据分析，实时情感识别，视频合成，Ai数字人直播系统源码出售，Ai数字人直播系统源码部署实现 AI 数字人 24 小时不间断直播功能是一个较为复杂的任务，涉及到多个方面，如直播流的推送、内容的持续生成、系统的稳定性保障等。以下为你提供一个简化的实现思路和示例代码，借助 Python 结合 FFmpeg 工具来模拟 24 小时不间断直播。

weixin_ggwwsscc的博客 1256

js控制屏幕高度自适应 切换屏幕/窗口缩放仍然保持自适应

公共js方法如下：//内容自适应窗口大小 function resizeEle(ele, isResetH, IsResetW) { var windowWidth = getPageSize()[2]; var windowHeight = getPageSize()[3]; if (isResetH !== null) $(ele).css("heigh...

nnn_net的博客 1万+

RT-DETR算法优化改进：轻量级上采样CARAFE算子 | 注意力机制大作战

上采样操作CARAFE，具有感受野大、内容感知、轻量级、计算速度快等优点，引入RT-DETR二次创新；1）代替Upsample进行使用；

①答疑群聊服务；②YOLO大模型知识问答系统；③计算机视觉论文生成智能体； 1265

iframe 自适应

function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.

牛肉胡辣汤 5854

YOLOv11改进缝合注意力 | 深度优化的BiFormer模型-结合BiLevel Routing Attention与深度可分离卷积的创新应用（附代码）

YOLO（You Only Look Once）系列目标检测算法一直以来都是计算机视觉领域的热门选择。随着YOLOv11的发布，它在许多实际应用场景中取得了显著的性能提升。然而，面对日益复杂的目标检测任务，单纯依赖卷积神经网络（CNN）在某些情况下已经显得力不从心，特别是在处理小尺度、密集目标以及遮挡目标时，卷积操作的局部性限制了模型的表达能力。

一键难忘的博客 716

系统架构设计（以飞控系统、航电系统、机电管理系统、电子电气架构为例）

系统架构涉及对系统的结构和行为进行高层次的描述。它包括系统的组成部分、这些部分之间的关系、与外部环境的交互方式，以及满足特定功能和非功能性需求的方法。系统架构定义了系统的总体设计蓝图，指导系统的开发、集成、部署和维护。系统架构设计的目的是通过合理的结构和设计原则，确保系统能够高效、稳定、安全地运行，满足当前和未来的需求，同时具备良好的维护性、扩展性和可持续性。良好的系统架构不仅能够提高系统的开发效率和运行性能，还能降低长期的维护和运营成本，支持系统的持续演进和技术更新。

qq_41854911的博客 3052

iframe自适应加载页面高度-js实现(转载)

<br />iframe,尤其是不带边框的iframe因为能和网页无缝的结合从 而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高 度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下JS函数：<br />程序代码<br />function SetWinHeight(obj)<br />{<br />    var win=obj;<br />    if (doc

spring123666的专栏 1242

[系统安全] 三十二.恶意代码检测(2)常用技术详解及总结

前文从产业界和学术界分别详细讲解恶意代码攻击溯源的相关知识，在学术界方面，用类似于综述来介绍攻击追踪溯源的不同方法；在产业界方面，主要参考李东宏老师从企业恶意样本分析的角度介绍溯源工作。这篇文章将详细总结恶意代码检测技术，包括恶意代码检测的对象和策略、特征值检测技术、校验和检测技术、启发式扫描技术、虚拟机检测技术和主动防御技术。希望这篇文章对您有所帮助，如果文章中存在错误、理解不到位或侵权的地方，还请告知作者与海涵。且看且珍惜，加油~

杨秀璋的专栏 1万+

iframe高度自适应

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面 为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe高度自适应。 js代码 function setIframeHeight(iframe) { 　　if (iframe) {　　　　/*　　　　　　contentDocument是获得iframe子...

weixin_30287169的博客 103

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

javascript解决iframe框架页面自适应高度问题

本文采用javascript解决了iframe框架页面自适应高度问题，代码如下：需要注意的是框架引用页面一定要设置name属性，否则会不生效test.asp页面head间增加如下JS代码function f_frameStyleResize(targObj){var targWin = targObj.parent.document.all[targObj.name];if(targWin !=

baidu_2008的专栏 567

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

iframe自适应高度

使iframe自适应高度 两点注意： 1）js代码放在iframe标签下 2）相应的需要在iframe标签中展现的页面要有高度   &lt;iframe id="iframe" name="iframe" style="border:0px;width:740px;height:415px;" src="&lt;?php echo site_url('index/home/inde...

ning_vina的专栏 167

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

iframe自适应加载页面高度-js实现

iframe,尤其是不带边框的iframe因为能和网页无缝的结合从 而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高 度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下JS函数： 程序代码 function SetWinHeight(obj) {  ...

lk215215 256

iframe标签嵌套页面时，如何让页面内的高度自适应

iframe 高度自适应，解决你的问题。小问题，大后果，争取做细致的前端人。

AI布道师丨波仔椿 3244

php iframe 自适应高度,HTML教程：如何设置Iframe自适应高度

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数：一、程序代码function SetWinHeight(obj){var win=obj;if ...

weixin_36377930的博客 175

php iframe 自适应高度,推荐几款完美实现iframe高度自适应

iframe自适应内容大小,支持跨域检测内容大小改变窗口大小，支持多个iframe嵌套,提供一系列的页面大小的计算方法来支持复杂的CSS布局,检测到窗口大小调整可以使网页CSS动画和过渡调整大小事件, 提供自定义的大小和滚动的方法. iFrameResize( [{options}], [css selector] || [iframe] ); $('iframe').iFrameResize( ...

weixin_36180471的博客 331

js实现iframe自适应子页面的内容高度，子页面高度发生变化也可以同步调整

今天做项目需要用到iframe自适应内容高度，但是页面内容是异步加载的，高度会随内容变化，高度是不一定的，看了很多文章，要不然就是太复杂，一大堆代码看了就头大，也有一行代码的实现的，但是如果碰到js异步加载的内容高度变化后就不能自动调整了，后来看到一段简单的代码，这边引用分享一下： <iframe src="" class="iframeHeight" name="iframe" width="100%" height="100%" id="searchshow" frameborder="no" s

xz842913787的博客 1071

如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)

最近在前端页面遇到了一个问题，我在一个页面中利用iframe框架引入了一个页面进来，但是这个页面的高度是不叫高的，高出电脑屏幕很多， 所以就引发了iframe框架一个滚动条，然后主页面一个滚动条，这样页面就出现了两个滚动条。在网上查了好久，一直没有好的方法，直到我在 网上看到了iframe高度自适应，才解决了这个问题。 自适应的意思是，iframe框架的高度自动适应引入的HTML文...

weixin_30873847的博客 1321

IFRAME自适应网页

之前自己也碰到过这个问题，为了得到答案去网上搜索，发现有不少人也遇到了这样的问题，现在就把解决方法共享一下，超简单哦。1、建立一个bottom.js的文件，然后输入下面的代码（只有两行哦）parent.document.all("框架ID名").style.height=document.body.scrollHeight;parent.document.all("框架ID名").styl

hailxie的专栏 760

设置iframe自适应高度(/*兼容FF/IE9/IE8/IE7/IE6*)

js: function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWe

Sbangm的专栏 1万+

有关动态设置iframe高度问题_

  今天在工作中遇到有关一个主页面中加载多个Iframe标签，要求Iframe自适应高度，不许出现滚动。当时做了好久还是没有做到自适应高度，现在解决了，共享如下： 假定主页面的部分代码如下： &lt;body&gt;&lt;div&gt;&lt;iframe id="frame1" src="index2.htm" width="100%" scrolling="no" margin

Rod_Johson的专栏 229

iframe自适应高度(兼容多种浏览器)

function iFrameHeight() {         var ifm= document.getElementById("iframepage");         var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;             i

别在熬夜了！ 560
下一篇： mysql替换字段中的回车换行符
点赞 0
评论 0
书签 书签 0
dinphi
dinphi
博客等级 码龄18年 11粉丝 16原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值