vue打印iframe嵌套的html页面，解决vue初始化触发函数但是传值失败的问题

---

前言

这里主要是为了记录改变this指向解决vue初始化触发函数传值不了数据到html页面的问题，

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、iframe使用注意事项？

示例：链接: link.

二、使用步骤

1.Vue 组件如何引入 iframe

代码如下（示例）：

<template>
  <div style="overflow:hidden;" ref="wrapdiv">
    <button @click="sendmessage">发送数据</button>
    <div>子页面给父页面的数据:{{sondata}}</div>
    <iframe
      ref="mapFrame"
      id="mapFrame"
      scrolling="no"
      width="100%"
      :height="height"
      frameborder="0"
      :src="url"
    />
  </div>
</template>

<!-- 然后data中绑定src要引入的目录,那么第一步就完成了 -->

2.Vue 如何获取 iframe 对象以及 iframe 内的 window 对象并传值到html文件

代码如下（示例）：

export default {
  data() {
    return {
      message: '首页',
      url: 'http://www.textiframe.com/',
      iframeWin: {},
      sondata: ' ',
      height: ''
    }
  },
  mounted() {
    //一定要改变this指向，不要问为什么---解决有时候vue页面初始化获取的值传送不了的情况
    let _this = this
    //获取到了iframe的对象
    console.log( _this.$refs.mapFrame)
    //获取到了iframe的window对象
     const iframeWin = mapFrame.contentWindow
    //赋值
     _this.getPointNurse()
     iframeWin.postMessage(info, '*')
     //传想要的数据就用对象的形式： iframeWin.postMessage({ nightInfo: this.nightInfo, time: time }, '*')
  }
}

---

3.子页面 iframe 内部如何接收信息并发送信息

接收代码如下（示例）：

  $(function() {
        // 接受父页面发来的信息
        window.addEventListener(
          "message",
          function(messageEvent) {
             var data = messageEvent.data;
             let num = data.nightInfo
			 console.log(data)

传信息到vue代码如下（示例）：

//1.必须在元素上绑定 onclick 
  //为了测试是否能接受到数据
    <button id="button1" onclick="callParent()">
      点击跳转
    </button>
//2.window.parent.postMessage 来发送数据
     function callParent() {
      window.parent.postMessage(
        {
          cmd: 'returnHeight',
          params: {
            success: true,
            result: {
              message: '我是子页面给父页面的数据哈哈'
            }
          }
        },
        '*'
      )
    }

---

4.Vue 组件如何打印iframe下的html

 document.getElementById('mapFrame').contentWindow.print();

总结

提示：这里对文章进行总结：业余生活要有意义，不要越轨。——华盛顿