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>