vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据

最新推荐文章于 2024-07-22 10:30:01 发布

st646889325

最新推荐文章于 2024-07-22 10:30:01 发布

阅读量320

点赞数 4

分类专栏： Vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/st646889325/article/details/140094960

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vue3使用ifame标签引用html页面,如何vue页面向html页面传递数据

一、实现需求
二、实现步骤
2.1 vue页
2.2 html页

一、实现需求

有一个vue页面,里边内嵌一个ifame标签(引用本地一个html页面),如何vue页面请求接口拿到数据后,向html页面传递

二、实现步骤

2.1 vue页
1.html部分注意html页需要放在根目录下public文件夹下

<div >
      <iframe
        width="100%"
        height="1000px"
        ref="iframeRef"
        src="static/reportInfo.html"
      ></iframe>
    </div>

2.请求接口拿到数据,调用向html数据传递方法

//向html页面中传递数据 (data为接口中获取到的数据)
const toHtml = (data: any) => {
  //这里的iframeRef 对应 iframe标签中的ref属性的值 （ref="iframeRef"）
  const iframeWindow = iframeRef.value.contentWindow
  console.log('iframeWindow', iframeWindow)

  iframeWindow.postMessage(
    {
      cmd: 'myVue',
      params: {
        info: data, //需要传递的数据
      },
    },
    '*'
  )
  iframeWindow.addEventListener('message', function (event: any) {
    console.log('发送执行完毕回调', event)
  })
}

2.2 html页

<html>
  <head>
    <title>html页面</title>

    <style type="text/css" media="screen" class="example"></style>
    <style>
    /* 渲染html页,table表格边框消失问题 */
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>

  <body class="container">
    <div id="reportId"></div>
    <script class="example">
    //获取dom
      let dom = document.querySelector('#reportId')
      //监听事件
      window.addEventListener(
        'message',
        function (event) {
          var data = event.data
          //渲染数据
          setTimeout(() => {
            dom.innerHTML = data.params.info
          }, 0)
        },
        '*'
      )
    </script>
  </body>
</html>