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

这篇具有很好参考价值的文章主要介绍了项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

iframe与外部之间传值

父组件

        <iframe
          id="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>

项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法,前端技巧方法,Vue,JavaScript,html,服务器,前端

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

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

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

看图你应该就明白了
项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法,前端技巧方法,Vue,JavaScript,html,服务器,前端

iframe 路由错乱问题描述：

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

主要是由于浏览器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，相减即可得知需要返回多少个页面

```typescript
    const clickBack = () => {
      // router.go(-1);
      let nowhl = window.history.length;
      let backCount = nowhl - historyLength + 1;
      router.go(-backCount);
    }