vue + iframe + xterm iframe传值传不通刷新后可获取值

本文探讨了Vue应用通过iframe嵌入静态xterm.js页面时遇到的跨域和缓存问题。作者尝试了postMessage API、清除缓存和模拟点击事件的方法，并提供了优化解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bug背景：

我们需要做控制台，本来是以接口形式做的，但是后端觉得太捞就用了他推荐的原生 xterm.js + websocket模式。

我是vue 包着 iframe ，iframe的url为静态的页面做的。

结构如下：

vue代码：

<template>
  <div class="webSSH">
    <iframe v-if="url" id="iframe" ref="iframe" :src="url" frameborder="0" style="width: 100%; height: 500px; overflow: hidden"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: "webSSH",
  props: {
    type: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      url: "",
      randomnumber: Math.floor(Math.random() * 100000),
      iframeWin: null,
    };
  },
  watch: {
    type: {
      handler(value) {
        if (!value) {
          this.url = "";
        } else {
          this.url =
            "/webSSH/page/webssh.html?randomnumber=" + this.randomnumber;
        }
      },
    },
  },
  created() {
    this.url = "/webSSH/page/webssh.html?randomnumber=" + this.randomnumber;  
  },
  mounted() {
    this.iframeWin = this.$refs.iframe.contentWindow;
    this.iFrameInit()
  },
  methods: {
    iFrameInit() {
      console.log('这里是父，正在给子传值');
      this.iframeWin.postMessage(
        this.item,"*"
      );
    },
  },
};
</script>

静态页 html代码：

<!doctype html>
<html>

<head>
    <title>WebSSH</title>
    <link rel="stylesheet" href="../css/xterm.css" />
</head>

<body>
    <div id="terminal" style="width: 100%;height: 400px;"></div>

    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/xterm.js" charset="utf-8"></script>
    <script src="../js/webssh.js" charset="utf-8"></script>
    <script>
        var data = {};
        console.log('这里是子，正等待父的传值');
        window.addEventListener("message", (event) => {
            console.log('这里是接收到来自父页面的消息，消息内容在event.data属性中', event)
            data = event.data
        }, false)
        openTerminal(data);
        function openTerminal(options) {
            ... // xterm 处理函数
        }

    </script>
</body>

</html>

bug效果：

经过半天和postMessage的api反复对比，发现不是我写错了。原因，是缓存问题。

因为无意中发现，保存vue代码会让他发送，所以判定是缓存问题。

那么接下来清理缓存就好，网上推荐的方法全部都是强制刷新

document.getElementById(iframe的ID).contentWindow.location.reload(true);

但是在我这里还是不好用，依旧传不来值。所以，我想换种方法。既然网上大部分人都是触发点击事件进行iframe传值，那我们也模拟一个点击事件好了。怎么模拟呢，我还是用了最笨的方法，setTimeout。

//前后都不变， 就不重复贴代码了


  mounted() {
    this.iframeWin = this.$refs.iframe.contentWindow;
    setTimeout(() => {
      this.iFrameInit()
    }, 500);
  },

看下效果：