iframe传递参数

1、iframe父页面发送数据和接受数据

<template>

  <div class="iframedemo">

    <iframe

      :src="`http://www.baidu.com/?${params}`"

      style="width: 100%; height: 100%"

    ></iframe>

  </div>

</template>

<script>

export default {

  data() {

    return {

      params: {},

    };

  },

  created() {},

  mounted() {

    const params = {

      name1: "xxx",

      name2: "xxx",

    };

    this.params = encodeURIComponent(JSON.stringify(params));

    window.addEventListener("message", this.handleMessage);

  },

  methods: {

    handleMessage(event) {

      console.log(event, "事件");

      if (event.data.status === "ok") {

        console.log(event.data.params, "参数值");

      }

    },

  },

};

</script>

2、子页面接受数据和发送数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<template>   <view>     <p>获得的参数：{{params}}</p>     <button @click="sendMess">发送数据</button>   </view> </template> <script>   export default {     data() {       return {         params: ''       };     },     created() {       const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))       this.params = params     },     methods: {       sendMess() {         window.parent.postMessage({           status: 'ok',           params: {             id: 111           }         }, '*');       }     }   } </script>