首页vue项目中引用iframe，iframe内是网页，存在跨域情况，怎么获取iframe内容内嵌页面的高度

vue项目中引用iframe，iframe内是网页，存在跨域情况，怎么获取iframe内容内嵌页面的高度

时间: 2023-08-13 20:08:23 浏览: 155

在 Vue 项目中引用 iframe 并且存在跨域情况时，要获取 iframe 内嵌页面的高度，你可以使用 postMessage 方法来实现跨域通信。首先，在父页面中，你需要监听 iframe 的加载完成事件，并在该事件中发送一个 postMessage 给 iframe 内嵌页面： ```javascript // 父页面 mounted() { const iframe = document.getElementById('my-iframe'); iframe.addEventListener('load', () => { iframe.contentWindow.postMessage('getIframeHeight', '*'); }); window.addEventListener('message', this.handleMessage); }, methods: { handleMessage(event) { if (event.data && event.data.type === 'iframeHeight') { const height = event.data.height; // 在这里获取到 iframe 内嵌页面的高度 console.log(height); } } } ``` 在内嵌的 iframe 页面中，你需要监听父页面发送过来的 postMessage，并在收到消息时获取 iframe 页面的高度，并将高度通过 postMessage 发送回父页面： ```javascript // iframe 内嵌页面 window.addEventListener('message', (event) => { if (event.data === 'getIframeHeight') { const height = document.documentElement.scrollHeight; parent.postMessage({ type: 'iframeHeight', height }, '*'); } }); ``` 这样，当 iframe 加载完成后，父页面会发送一个消息给 iframe 内嵌页面，内嵌页面接收到消息后获取高度并发送回父页面，父页面再接收到消息后即可获取到 iframe 内嵌页面的高度。

阅读全文