实际需求：页面中有一些固定元素 + 内嵌 iframe 页面，此时如果给 iframe 设置固定高度会导致 iframe 内部滚动，体验不佳。
于是需要动态获取 iframe 实际高度并设置，但有些 iframe 页面会有占位 loading or 骨架屏等，导致一开始就获取高度会不准。
解决方案如下：

<iframe width="100%" id="iframe" :src="iframeSrc" frameborder="0"></iframe>

iframeSrc = '';
timerId: any = 0;
iframeHeightCount = { height: 0, count: 0 };// 动态设置 iframe 高度
resizeIframeHeight(iframeEl: any) {try {// 这里使用 try catch 是因为获取 contentWindow 或 contentDocument 可能会抛错const iframeWindow = iframeEl.contentWindow || iframeEl.contentDocument.parentWindow;if (iframeWindow.document.body) {// 获取主容器高度，iframe内的DIV容器高度是会自己撑开的（具体获取的id按实际情况更改）const height = iframeWindow.document.querySelector('#comp-fixed').offsetHeight;if (height === this.iframeHeightCount.height) {// 这里存储了下相同高度的次数，用于下方超过 n 次后不再获取，节省资源this.iframeHeightCount = { height: height, count: this.iframeHeightCount.count + 1 };} else {// 设置 iframe 高度，这里不要用 style 动态绑定高度，而是用这种方式iframeEl.height = height + 20 + 'px';this.iframeHeightCount = { height: height, count: 1 };}}} catch (error) {}
}setIframe() {// 设置前端项目基础域名（用于共享cookie、共享登录态、函数传参）document.domain = 'baidu.com';this.iframeSrc = 'https://www.baidu.com';this.isShowIframe = true;this.timerId = setInterval(() => {// 维持一个高度超过 5s 则不会再获取高度if (this.iframeHeightCount.count > 10) {clearInterval(this.timerId);this.timerId = null;} else {// 选中iframeconst iframeEl = document.querySelector('#iframe');if (iframeEl) {this.resizeIframeHeight(iframeEl);}}}, 500);
}mounted() {this.setIframe();
}

码字不易，觉得有帮助的小伙伴点个赞支持下~

扫描上方二维码关注我的订阅号~

动态获取并设置 iframe 自适应高度相关推荐

设置iframe自适应高度
设置iframe自适应高度 HTML <iframe src="main.html" frameborder="0" scrolling="no ...
angular中跨域设置iframe自适应高度，去滚动条。
A页面的html中有<iframe #frame class="frame" [src]="srcUrl" width="100%" ...
iframe 自适应高度的多种实现方式
iframe高度自适应内容需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. 设置iframe 自适应高度,使其等于内嵌网页的高度 ...
跨域下的iframe自适应高度
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
vue通过postMessage实现iframe自适应高度，支持跨域
通过消息传递实现iframe自适应高度,支持跨域. 父页面监听消息 <template><iframe id="processFrame" name=" ...
[转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...

动态获取并设置 iframe 自适应高度

码字不易，觉得有帮助的小伙伴点个赞支持下~

扫描上方二维码关注我的订阅号~

动态获取并设置 iframe 自适应高度相关推荐

最新文章

热门文章