iframe缓存问题不更新？

  • Z时代
  • 2024-02-24
  • 分类：IT

场景是有一个主应用里面有多个子应用，其中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>

回答：

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

以上是 iframe缓存问题不更新？ 的全部内容， 来源链接： utcz.com/p/935102.html

回到顶部