iframe的onload事件不执行以及postMessage执行多次

1.  关于iframe onload事件不起作用, 以及src的顺序。

2. 关于postMessage触发多次。

let iframeDom = document.getElementById('iframe')

iframeDom.onload = function () {
  iframeDom.contentWindow.postMessage(参数, '*')
}

iframeDom.src = 'xxx'

解决:

   1. onload是在iframe执行前就要定义好, 否则不会执行, 所以onload和src的顺序很重要。

   2. postMessage会执行多次, 更改为window.onmessage =  function () {}

// 原先写法
window.addEventListener('message', function () {})

// 更改之后
window.onmessage = function () {}

### 设置 iframe 高度以匹配其内容高度 为了动态调整 iframe 的高度以适应其内部的内容,可以通过 JavaScript 实现。以下是实现方法的具体说明: #### 方法概述 当页面加载完成后,或者在指定的时间间隔内定期检查 iframe 内部文档的高度,并将其应用到 iframe 上。需要注意的是,如果 iframe 加载的资源来自同的域,则会受到跨域策略的影响。 #### 关键技术点 1. 使用 `contentDocument` 或 `contentWindow.document` 访问 iframe 中的文档对象[^1]。 2. 获取 iframe 文档的实际高度并更新 iframe 的样式属性。 3. 处理跨域访问的情况以及性能优化问题。 #### 示例代码 以下是一个完整的例子,展示如何通过 JavaScript 动态设置 iframe 的高度以匹配其内容高度: ```javascript // 定义函数来调整 iframe 高度 function adjustIframeHeight(iframeId) { const iframe = document.getElementById(iframeId); try { // 尝试获取 iframe 的内容文档 const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // 如果无法访问 iframe 的内容(例如跨域),则抛出错误 if (!iframeDoc.body) throw new Error('Cannot access iframe content'); // 获取 iframe 内容的高度 const contentHeight = Math.max( iframeDoc.body.scrollHeight, iframeDoc.documentElement.scrollHeight, iframeDoc.body.offsetHeight, iframeDoc.documentElement.offsetHeight, iframeDoc.body.clientHeight, iframeDoc.documentElement.clientHeight ); // 更新 iframe 的高度 iframe.style.height = `${contentHeight}px`; } catch (error) { console.error(`Failed to adjust iframe height: ${error.message}`); } } // 页面加载完成时调用该函数 window.addEventListener('load', () => { adjustIframeHeight('myIframe'); // 假设 iframe 的 id 是 myIframe }); // 可选:定时器方式定期检查 iframe 高度变化 setInterval(() => { adjustIframeHeight('myIframe'); }, 500); // 每隔 500ms 检查一次 ``` #### 性能考虑 由于频繁操作 DOM 和重新计算布局可能会降低性能,因此建议仅在必要时触发高度调整逻辑。例如,在初始加载完成后立即调整一次即可满足大多数需求;对于动态内容较多的场景,可以结合事件监听机制(如 MutationObserver)进一步优化。 --- #### 跨域解决方案 如果 iframe 来自其他域名,上述方法将因浏览器的安全限制而失效。此时可通过以下两种常见方案解决: 1. **服务器端代理**:让父页面和子页面都托管在同一域名下。 2. **postMessage API**:利用 postMessage 进行父子窗口间的通信,由 iframe 自己报告其内容高度给宿主页面[^2]。 示例代码如下: ```javascript // 子页面发送消息 parent.postMessage({ height: document.body.scrollHeight }, '*'); // 父页面接收消息 window.addEventListener('message', function(event) { var message = event.data; if (typeof message === 'object' && typeof message.height === 'number') { document.getElementById('myIframe').style.height = `${message.height}px`; } }); ``` --- ### 注意事项 - 当前方法假设 iframe 的内容始终可用且未被阻止访问。实际开发中需处理潜在异常情况。 - 对于大型复杂页面,应评估是否可以通过减少组件数量或其他手段提升整体性能[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值