iframe缓存问题不更新?

作者站长头像
站长
· 阅读数 4

场景是有一个主应用里面有多个子应用,其中a应用嵌入iframe(b应用)展示,可点击弹窗大屏展示;问题1:a应用进来iframe展示操作没问题,但是点击大屏显示的时候控制台明明打印出来数据但是b应用页面没更新,使用强制刷新forceUpdate和局部刷新this.$nextTick都不好使,使用v-if也是初次进来有触发信息但是页面还是没有显示问题2:c应用引入iframe(b应用),有复制和发送功能呢触发后postMessage给c应用,在谷歌浏览器操作时好使的,在360上报浏览器安全问题Blocked a frame with origin "https://www.123.com" from accessing a cross-origin frame.代码模拟:

<el-drawer
            title="我是标题"
            size="80%"
            :visible.sync="drawer"
            :with-header="false"
            :direction="direction">
            <iframeTest v-if="drawer"></iframeTest>
        </el-drawer>
        <div style="margin-top: 20px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="智能辅助" name="global">
                    <iframeTest v-if="this.activeName === 'global'"></iframeTest>
                    <div>
                        <el-button
                            @click="drawerClick"
                            type="primary"
                            style="margin-left: 16px">
                            点我打开
                        </el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="售后处理" name="channel">售后处理</el-tab-pane>
            </el-tabs>
        </div>
// 子组件
<template>
    <div class="iframeTest pd20">
        <iframe
            id="saasAiAssist"
            width="100%"
            height="500px"
            @load="iframeUpdatedHandle"
            src="引入地址"
            frameborder="0"
            scrolling="auto"
            class="iframe-con"></iframe>
    </div>
</template>
<script>
    export default {
        name: 'iframeTest',
        //   components: {},
        data() {
            return {
                drawer: false,
                direction: 'rtl'
            };
        },
        //   created() {},
        methods: {
            iframeUpdatedHandle() {
                const iframe = document.getElementById('saasAiAssist');
                const res = {
                    isSend: false,
                    isUsage: false
                };
                // res为可以往智能辅助的传递数据(当前需求是区分在线和电话,可以直接用module判断,后期数据多的话可以放到res里面)
                // type必传(父传子默认parent)moudule必传source必传res非必传
                const messageObject = {
                    type: 'parent',
                    module: '自定义form应用',
                    source: 'source-a',
                    res
                };
                iframe.contentWindow.postMessage(messageObject, '*');
            }
        }
    };
</script>
<style lang="scss" scoped>
    .pd20 {
        padding: 20px;
    }
</style>
回复
1个回答
avatar
test
2024-06-25

在iframe的src后面加个随机数/时间戳试下

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容