项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

iframe与外部之间传值

父组件

        <iframeid="iframe"src="luckysheet/index.html"frameborder="0"scrolling="no"style="width: 100%; height: 60vh; border: 0"/>const frame = document.getElementById('iframe');frame.onload = function () {//调取子组件中的方法，传值到子组件frame.contentWindow.filesDropped(data);//获取子组件的方法frame.contentWindow.getChild = getChild;};const getChild = (data: any) => {console.log('获取到子组件数据', data);};

子组件：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>luckysheet</title><link rel='stylesheet' href='./plugins/css/pluginsCss.css' /><link rel='stylesheet' href='./plugins/plugins.css' /><link rel='stylesheet' href='./css/luckysheet.css' /><link rel='stylesheet' href='./assets/iconfont/iconfont.css' /><script src="./plugins/js/plugin.js"></script><script src="./luckysheet.umd.js"></script><style>* {margin: 0px;padding: 0px;}#luckysheet {width: 100vw;height: 100vh;}#chat-assistant-container {display: none;}</style>
</head><body><div><button type="button" id="btn1">传值给父组件</button></div><div id="luckysheet"></div>
</body></html>
<script>let btn1 = document.getElementById('btn1');btn1.onclick = () => {window.getChild('hhh');}function filesDropped(data) {console.log(data);window.luckysheet.create({container: 'luckysheet', //luckysheet is the container id// lang: 'zh', // 设定表格语言showinfobar: false,data});}
</script>

假设父组件下有两个同级的iframe1子组件与iframe2子组件;需求是父组件可以与iframe之间传值，iframe1与iframe2之间也可以相互传值；

方法一、通过子组件iframe1向父组件传值，再通过父组件向子组件iframe2传值可达到目的;

注意:模拟时需要开启服务器，否则会出现跨域问题！

看图你应该就明白了
在这里插入图片描述

问题描述：

在项目中使用iframe引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下：

主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案

解决方案如涉及iframe内地址的跳转

首先进入页面，记录history length

    let historyLength = 1;onMounted(() => {// iframe.value.contentWindow.location.replace(htmlUrl.value);historyLength = window.history.length;});```## 然后在页面返回时获取当前history length，相减即可得知需要返回多少个页面```typescriptconst clickBack = () => {// router.go(-1);let nowhl = window.history.length;let backCount = nowhl - historyLength + 1;router.go(-backCount);}