### Vue 中
iframe 不自动加载的解决方案
在 Vue 项目中，如果遇到
iframe 不自动加载的
问题，可能的原因包括以下几个方面：
1. **动态设置 `src` 属性**
如果 `src` 是通过数据绑定的方式动态
赋值，则可能会因为初始值为空或其他原因导致
iframe 不触发加载行为。可以通过监听 `src` 的变化并手动触发行为主动调用。
2. **跨域限制**
浏览器的安全策略（如同源策略）可能导致某些情况下
iframe 加载失败或延迟加载。需要确认目标 URL 是否存在跨域
问题以及服务器端是否设置了正确的 CORS 头部信息[^1]。
3. **Vue 生命周期中的
初始化逻辑**
在 Vue 组件生命周期中，确保 `src` 值已经正确传递给模板层后再渲染
iframe 元素。通常可以在 `mounted()` 阶段完成这一操作。
以下是具体的解决方案代码示例：
#### 方案一：强制刷新
iframe
通过
JavaScript 手动控制
iframe 的
重新加载过程，在 `@load` 或其他事件回调函数中执行刷新动作。
```
javascript
<template>
<div>
<el-card class="container-card-second" v-loading="loading" element-loading-text="加载中...">
<
iframe
id="
iframeId"
ref="my
Iframe"
@load="handle
IframeLoad"
:src="url"
width="100%"
frameborder="0"
allowfullscreen >
</
iframe>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://example.com',
loading: true,
};
},
methods: {
handle
IframeLoad() {
this.loading = false;
},
reload
Iframe() {
const
iframe = this.$refs.my
Iframe;
if (
iframe &&
iframe.contentWindow) {
iframe.src = ''; // 清空 src
setTimeout(() => {
iframe.src = this.url; }, 0); // 设置新的 src 来触发加载
}
}
},
mounted() {
this.reload
Iframe(); //
初始化时尝试
重新加载一次
}
};
</script>
```
此
方法适用于因网络环境或者服务端响应时间较长而导致的
iframe 初始未成功加载的情况。
---
#### 方案二：使用懒加载优化性能
对于大型应用来说，尤其是涉及多个
iframe 页面切换场景下，可以采用 vue-router 结合 Webpack 提供的懒加载机制来减少首屏加载压力。这样即使某个 tab 下有复杂
iframe 内容也不会阻塞整个页面启动速度[^3]。
```
javascript
const routes = [
{
path: '/tabA',
component: () => import('@/views/TabA.vue') // 动态导入 TabA.vue 文件
},
{
path: '/tabB',
component: () => import('@/views/TabB.vue')
}
];
```
同时需要注意的是，虽然懒加载能够改善整体体验，但如果希望保留用户的浏览历史记录或者其他交互状态，则还需要额外引入 Vuex 等工具配合管理全局共享的数据结构[^2]。
---
#### 方案三：解决缓存失效
问题
针对若依框架提到过的 keep-alive 对于常规组件有效而对
iframe 类型无效的现象，我们可以通过自定义指令方式绕开该局限性。即每次进入对应路由前先保存当前
iframe 的 scroll position 和 other states ，离开时候再恢复它们即可达到类似效果。
```
javascript
// 自定义指令 example-vue-directive.
js
Vue.directive('cache-frame', {
inserted(el, binding) {
el.onload = function () {
sessionStorage.setItem(binding.value.key || '',
JSON.stringify({
scrollTop: document.
body.scrollTop || window.pageYOffset,
...binding.value.data
}));
};
let cachedDataStr = sessionStorage.getItem(binding.value.key);
if(cachedDataStr){
Object.assign(window.history.state||{},
JSON.parse(cachedDataStr));
}
}
});
```
然后修改原有 HTML 如下所示：
```html
<
iframe
id="
iframeId"
ref="my
Iframe"
v-cache-frame="{key:'uniqueKeyForThisFrame'}"
...
></
iframe>
```
以上三种办法分别从不同角度解决了 Vue 应用开发过程中常见的
iframe 自动加载难题及其衍生出来的各种挑战。
---
本文介绍了一种使用JavaScript来动态设置网页中div、iframe及body等元素的高度的方法。通过document.body.clientHeight获取当前页面可视区域的高度，并减去特定偏移量，然后将此值应用到指定的元素上。
扫一扫
3906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
