vue 通过 iframe 嵌套 html 互相传参

最新推荐文章于 2025-03-07 11:06:00 发布

笨笨的幸福1230

最新推荐文章于 2025-03-07 11:06:00 发布

阅读量1.1k

点赞数

文章标签： vue.js html

本文链接：https://blog.youkuaiyun.com/qq_42709302/article/details/111126100

版权

本文介绍了在Vue应用中如何实现与内嵌的HTML页面通过iframe进行参数传递。包括iframe向Vue页面传值和Vue向iframe页面传值的详细步骤，涉及到postMessage方法和直接操作iframe窗口对象的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中如何调用iframe的方法传值和iframe如何给vue传值

iframe给Vue页面传值

第一步：需要在iframe的index.html 的js 加入下面代码

function tableClick(name){
     window.parent.postMessage({
         data :name
     },'*');
}

完整的index.html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div onclick="tableClick()">
		哈哈哈哈哈
	</div>
	<script type="text/javascript">
		function tableClick(name){
			window.parent.postMessage({
			  data :name
			},'*');
		}
	</script>
</body>
</html>

在div里面点击tableClick 就可以给vue通信

第二步：在vue页面中需要进入监听，就可以传值并且触发vue的方法：

mounted() {
	window.addEventListener('message', function(e){
		console.log(e)
		$('iframe').css('display','none')
		// 这个里面也可以调用vue的方法
	})
},

完整的vue代码：

<template>
	<div class="shoukuan">
		<h2 class="font30" @click="showIframe('jydj')">
			点击跳转 iframe  嵌套的  html 的页面
		</h2>
		  <!-- 内容区域 -->
		<iframe id="child" 
			 ref="iframe" 
			width="100%" 
			:src='srcurl'
			:height="height+'px'" 
			scrolling="auto" 
			frameborder="0">
		</iframe>
	</div>
</template>
<script>
	export default {
		name: "lzPerformanceRegister",
		data() {
			return {
				srcurl:'',//iframe地址
			};
		},
		mounted() {
			window.addEventListener('message', function(e){
				console.log(e)
				$('iframe').css('display','none')
				// 这个里面也可以调用vue的方法
			})
		},
		methods: {

最低0.47元/天解锁文章