前端 - iframe缓存问题不更新？

Question

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

Answer 1

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

Answer 2

这个问题涉及到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进行跨域通信。这两种方法都可以在服务器端进行配置来允许跨域请求。