iframe跨域高度自适应
时间: 2023-08-29 16:14:08 浏览: 61
为了实现iframe的跨域高度自适应,你可以使用以下步骤:
1. 在父页面中,先获取到子页面的高度。可以通过子页面中的某个元素或者API来获取子页面的高度信息。
2. 使用window.postMessage方法将子页面的高度发送给父页面。在子页面中,需要监听message事件,并将子页面的高度发送给父页面。
在父页面中,添加以下代码:
```javascript
// 监听来自子页面的消息
window.addEventListener('message', function(e) {
// 确保消息来自于预期的子页面
if (e.origin !== '子页面的域名或URL') {
return;
}
// 获取子页面传递过来的高度
var height = parseInt(e.data);
// 设置iframe的高度
document.getElementById('yourIframeId').style.height = height + 'px';
});
```
在子页面中,添加以下代码:
```javascript
// 获取子页面的高度
function getHeight() {
var height = document.body.offsetHeight;
// 将高度信息发送给父页面
window.parent.postMessage(height, '父页面的域名或URL');
}
// 监听父页面传递过来的消息
window.addEventListener('message', function(e) {
// 确保消息来自于预期的父页面
if (e.origin !== '父页面的域名或URL') {
return;
}
// 获取父页面传递过来的高度
var height = parseInt(e.data);
// 设置子页面的高度
document.body.style.height = height + 'px';
});
// 在页面加载完成后获取页面高度并发送给父页面
window.onload = function() {
getHeight();
};
```
在上述代码中,你需要替换`子页面的域名或URL`和`父页面的域名或URL`为你实际使用的域名或URL。`yourIframeId`需要替换为你iframe元素的ID。
通过这种方式,子页面可以将自身的高度信息发送给父页面,父页面则可以根据接收到的高度信息来动态调整iframe的高度,实现跨域高度自适应。