HTML页面嵌入VUE项目的数据传输

HTML页面和VUE页面之间语法不一样，html嵌入VUE项目需要按如下可以进行数据传输

vue获取iframe嵌入的html的数据

<div>

	<div style="width:100vw;height:100vh;">
		<iframe ref="myFrame" src="/static/AnySignMiniCoreV2.6.1/signatureCapture.html" @load="onIframeLoad" style="width:100vw;height:90vh;"> </iframe>
	</div>
	<div @click="onIframeLoad">拿值</div>

	<div @click="onIframeLoad1">传值</div>
</div>

export default {
	data() {
		return {

		};
	},
	 mounted() {
	    //   获取并监听iframe传递来的数据
	    // let that = this;
	    // window.addEventListener('message', function (e) {
	    //   var res = e.data;
	    //   console.log(res, 'iframe传递过来的数据');
	    //   })
	 },
	methods: {
	 onIframeLoad() {
		const iframeWindow = this.$refs.myFrame.contentWindow;
		const iframeDocument = iframeWindow.document;
		// 在这里可以通过iframeDocument访问到iframe里页面的数据
		console.log(iframeDocument.getElementById("xss_20").src);
	  },
	  onIframeLoad1() {
		const iframeWindow = this.$refs.myFrame.contentWindow;
		const iframeDocument = iframeWindow.document;
		// 在这里可以通过iframeDocument访问到iframe里页面的数据
		// 向iframe里页面发送数据
		iframeWindow.postMessage({ message: "Hello from parent page!" }, "*");
	  },
	},
};
</script>

html接收VUE的传的数据

<!-- 在iframe里页面的HTML中 -->
<script>
  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {
    // 接收到从父页面发送过来的数据
    const message = event.data;
    console.log(message);
  }
</script>