JavaScript实现Iframe自适应其加载的内容高度

最新推荐文章于 2025-12-04 17:39:28 发布

转载最新推荐文章于 2025-12-04 17:39:28 发布 · 73 阅读

文章标签：

#javascript #xhtml #ViewUI

在使用IFrame的时候经常出现内容高度不符影响页面整体效果，利用JavaScript可以实现Iframe自适应其加载的内容高度．

//main.htm:

<html>

<head>

<title>iframe自适应加载的页面高度</title>

</head>

<body>

</body>

</html>

//child.htm:

<html>

<head>

<title>iframe 自适应其加载的网页(多浏览器兼容)</title>

<!--

function iframeAutoFit()

{

var ex;

try

{

if(window!=parent)

{

var a = parent.document.getElementsByTagName("IFRAME");

for(var i=0; i<a.length; i++) //author:meizz

{

if(a[i].contentWindow==window)

{

var h1=0, h2=0;

if(document.documentElement&&document.documentElement.scrollHeight)

{

h1=document.documentElement.scrollHeight;

}

if(document.body) h2=document.body.scrollHeight;

var h=Math.max(h1, h2);

if(document.all)

{h += 4;}

if(window.opera)

{h += 1;}

a[i].style.height = h +"px";

}

catch (ex)

{}

}

if(document.attachEvent)

{

window.attachEvent("onload", iframeAutoFit);

window.attachEvent("onresize", iframeAutoFit);

}

else

{

window.addEventListener('load', iframeAutoFit, false);

window.addEventListener('resize', iframeAutoFit, false);

}

//-->

</script>

</head>

<body>

<tr>

<td>iframe 自适应其加载的网页(多浏览器兼容，支持XHTML)</td>

</tr>

</table>

</body>

</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33804582

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Iframe自适应加载内容高度的JavaScript技巧

CgbAutoit的博客

09-30

195

通过监听iframe的加载事件，获取内容的高度，并将iframe的高度设置为内容的高度，我们可以确保iframe始终与其加载的内容高度保持一致。然而，由于嵌入的内容可能具有不同的高度，如何让iframe自适应加载内容的高度成为一个常见的问题。首先，我们需要在HTML文档中创建一个iframe标签，并为其指定一个唯一的id，以便在JavaScript中引用它。将iframe的高度设置为内容的高度。这样，无论加载的内容高度如何变化，iframe都会自动调整其高度以适应内容。获取了iframe中内容的完整高度。

Iframe自适应高度，Iframe高度问题解决

蕃薯耀的博客

03-10

4873

Iframe自适应高度，Iframe高度问题解决 ================================ ©Copyright 蕃薯耀2021-03-10 https://www.cnblogs.com/fanshuyao/ 一、Iframe自适应高度方法 /** * 父级页面获取子级页面的高度给元素设置高度 * 在onload事件之后才生效，即第一次加载才生效，后面高度变化...

参与评论您还未登录，请先登录后发表或查看评论

利用JavaScript实现iframe自适应内容高度的策略

weixin_35879493的博客

08-12

686

htmltable {th, td {th {pre {简介：iframe标签在网页开发中用于嵌入外部网页，但其高度自适应是常见的挑战。本文介绍了一种使用JavaScript实现iframe高度自适应的方法，包括获取iframe元素、设置初始高度、监听加载事件、计算内容高度并动态调整iframe高度。此外，还涉及了动态内容变化的处理和跨浏览器的兼容性问题。

iframe自适应高度

zhu_menglu的博客

04-12

5233

其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。

iframe自适应高度（随内容高度变化）

weixin_50641294的博客

05-25

6569

由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路：获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe

Iframe自适应其加载的内容高度

limshirley的专栏

04-17

2686

function iframeAutoFit() { try { if(window!=parent) { var a = parent.document.getElementsByTagName("IFRAME"); for(var i=0; i

jquery iframe自适应高度

m0_72495985的博客

11-04

655

注：iframe_title为导航栏，是一个jsp页面，上面的按钮利用超链中的target属性指定到iframe中（例：target="iframe_content"）按动按钮会在iframe_content显示相应的页面，如果没有这个js处理并且下面的页面高度大于当前浏览器窗口的高度时，就会出现两条滚动条。

JavaScript应用：Iframe自适应其加载的内容高度

weixin_34237596的博客

02-20

iframe 高度自适应问题

moamao_jishuyuan的博客

02-09

1076

需求介绍: 项目里要往web页面埋 facebook 的投稿，接口返回资源如下： <iframe id="hankyumensosaka" src="https://www.facebook.com/plugins/post.php?width=350&href=https://www.facebook.com/306922136507980/posts/327540447779482" width="350" height="500" style="border:none; ove

javascript应用：Iframe自适应其加载的内容高度

10-30

<title>iframe自适应加载的页面高度 <iframe src="child.htm"></iframe> ``` 此页面非常简单，仅包含了一个`<iframe>`元素，用于加载`child.htm`。 #### 3.2 子页面 `child.htm` ```html ;charset=gb2312'>...

JavaScript 处理Iframe自适应高度(同或不同域名下)

10-27

首先，我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时，可以通过JavaScript来获取嵌入页面的实际高度，并在Iframe的onload事件中设置其高度。具体做法是，在Iframe标签中...

使用javascript实现Iframe自适应高度

10-25

总的来说，通过JavaScript实现Iframe自适应高度是一个常见的优化用户体验的技巧。无论是通过监听`load`事件还是定时器，都是为了让用户能够完整地看到Iframe中的所有内容，避免出现滚动条或者内容被截断的问题。在...

Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手

JEECG官方博客

12-04

676

Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。

网络安全漏洞之React 框架分析

anquan2233的博客

12-04

777

昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。

vue实现页面不断插入内容并且自动滚动功能