iframe自适应高度,多层嵌套iframe自适应高度的解决方法

本文介绍了如何实现单个及多层嵌套iframe的高度自适应,包括简单的代码示例,适用于IE6/7/8和Firefox3.5等浏览器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用:

单个iframe 高度自适应:

<iframe id="iFrame1" name="iFrame1" width="100%" οnlοad="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

起作用的是这句:οnlοad="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应:
A页面的iframe:
<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php页面又有一个iframe:
<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" οnlοad="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

起作用的代码是这句:οnlοad="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的时候执行了两条js语句:

1、设置当前iframe自己的高度自适应
this.height=rightform.document.body.scrollHeight  

2、设置父iframe的高度自适应(注意后面的高度单位px,如果不加单位,firefox下不起作用)
parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上代码在ie6、ie7、ie8、firefox3.5下测试通过
### HTML5 中嵌套 iframe 的示例 在 HTML5 中,`<iframe>` 是一种非常常见的用于嵌入外部资源的方式。以下是基本的 `<iframe>` 使用方式: ```html <iframe src="https://example.com" width="600" height="400" title="Example"></iframe> ``` 上述代码展示了如何通过 `src` 属性指定目标 URL 来加载内容[^1]。 当涉及到嵌套多个 iframe 时,可以简单地在一个 iframe 内部再次定义新的 iframe 元素来实现多层嵌套。然而需要注意的是,这种做法可能会带来性能问题以及用户体验上的不便。 #### 自适应高度解决方案 为了使内部 iframe 能够根据其内容动态调整高度,可以通过 jQuery 实现这一功能。具体来说,监听子 iframe 加载事件,并计算其文档的高度,随后设置该 iframe 的样式属性以匹配实际所需空间大小。 ```javascript $(document).ready(function() { $('iframe').load(function(){ var iFrameID = $(this).attr('id'); if(iFrameID){ var obj = document.getElementById(iFrameID); obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } }); }); ``` 这段脚本会在每个 iframe 完成加载后重新设定它们的高度值,从而避免多余的滚动条出现。 ### 解决跨域通信问题 如果存在不同源之间的 iframe 和宿主页面,则会面临安全策略限制下的访问障碍。此时可采用 postMessage API 进行数据交换[^2]。 父窗口向子框架发送消息的例子如下所示: ```javascript var message = { data: "Hello from parent!" }; var targetOrigin = "*"; // 或者更具体的域名地址 document.querySelector('#myIframe').contentWindow.postMessage(message, targetOrigin); ``` 而接收方则需注册 event listener 处理传来的信息: ```javascript window.addEventListener("message", function(event) { console.log(event.data); // 输出接收到的消息对象中的data字段 }, false); ``` 以上方法解决了因同源政策而导致无法直接操作另一站点 DOM 结构的问题。 ### Vue.js 下的应用场景 对于现代前端框架如 Vue.js 用户而言,在构建单页应用(SPA)的同时也常需要用到 iframe 技术展示第三方服务或旧版遗留系统界面等内容[^3]。这里给出一段简单的例子说明怎样绑定 v-bind 动态改变 iframe 源路径: ```vue <template> <div class="container"> <iframe :src="url" frameborder="0"></iframe> </div> </template> <script> export default { name: 'App', data () { return { url:'http://www.testsite.com' } }, } </script> ``` 这样就可以利用 vue 数据响应机制轻松切换所显示网页链接了。 ### React 环境下实践案例 同样地,在 react 应用程序里也可以很方便地引入 iframe 组件并与之互动。借助生命周期钩子函数 componentDidMount 及 useEffect 配合 props 更新时机触发相应逻辑处理[^4]: ```jsx import React, { Component } from 'react'; class MyComponent extends Component { constructor(props){ super(props); this.state={ frameSrc:"" } } componentDidMount(){ window.addEventListener('message', (event)=>{ const msg=event.data; alert(`Received Message From Iframe:${msg}`); }) let newUrl='someOtherPage.html';//假设这是你要传递给iframe的新URL this.setState({frameSrc:newUrl}) } render(){ return ( <> <h1>React App With Nested Iframes Example</h1> <iframe id="nested-frame" src={this.state.frameSrc} /> </> ); } } ``` 此段代码片段演示了一个完整的流程——初始化阶段准备好了初始状态;接着等待特定条件满足后再更新 iframe 地址;最后还设置了针对来自 iframe 子级的信息反馈机制。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值