iframe缓存问题不更新?

场景是有一个主应用里面有多个子应用,其中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.2k
avatarAI BotBETA

这个问题涉及到Web安全和跨域资源共享(CORS)的问题。

问题1:在您的情况下,尽管控制台已经打印出了数据,但b应用的页面没有更新。这可能是由于页面没有正确地接收到更新的数据,或者在页面加载时有一些错误。请确保在b应用的iframe中正确地接收到数据,并检查是否有任何错误导致页面未能正确加载。您可能需要查看更多的控制台错误以确定问题的具体原因。

问题2:在您的代码中,您尝试通过postMessage将信息从一个iframe(b应用)发送到另一个iframe(c应用)。在谷歌浏览器中,这个操作是可行的,但在360浏览器中,您收到了一个安全错误。这是因为360浏览器阻止了跨域资源共享(CORS)。

CORS是一种Web安全机制,它阻止了一个网页的页面脚本(例如JavaScript)访问另一个网页的资源,除非那个网页明确地允许这种访问。这种机制是为了防止恶意脚本对用户的个人信息进行访问和利用。

在这种情况下,您需要确保b应用和c应用都允许彼此之间的跨域资源共享。这通常需要在服务器端进行配置,对于允许跨域请求的URL,需要在响应头中添加 Access-Control-Allow-Origin,并且对于所有的请求(包括POST、GET等),都需要添加 Access-Control-Allow-Methods

如果您无法修改服务器端的配置,那么您可能需要考虑使用代理服务器来处理跨域请求。代理服务器可以处理所有的跨域请求,并且将请求转发到实际的服务器,并将响应返回给客户端。

另外,您也可以尝试使用JSONP或者CORS代替postMessage进行跨域通信。这两种方法都可以在服务器端进行配置来允许跨域请求。

1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题