解决vue项目中，iframe依赖onload事件传递消息不可控接收问题

最新推荐文章于 2025-06-16 11:42:23 发布

转载

最新推荐文章于 2025-06-16 11:42:23 发布 · 1.1w 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c37fcf251882525a94e1269

文章标签：

#javascript #webpack #ViewUI

背景介绍

因项目需求，在原网站内需要嵌入另一个关联网站的内容，很自然的想到用iframe去解决。但是进入内联网站依赖于主网站的accessToken进行身份验证，因此就涉及到传递token的方式，以及传递的时机这两方面，而内联网站的首次渲染速度过慢问题，在排除webpack打包优化这方面影响后，很有可能就是接受token不及时导致延迟渲染。

另外，这两个都是vue项目。

先上案例代码

// 父页面
<template>
  <iframe ref="framePage" @load="deliverToken"></iframe>
</template>

<script>
export default {
    computed: {
        token() {
            return token  //  简单举例 
        }
    },
    methods: {
        deliverToken() {
            this.refs.framePage.contentWindow.postMessage({
   
   type: