iframe和页面之间的通信

最新推荐文章于 2024-06-19 09:54:31 发布

青衣浏阳

最新推荐文章于 2024-06-19 09:54:31 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/m0_49016709/article/details/113868424

版权

js javascript

开发时遇到需要引入第三方iframe层，并且需要有数据交互。
1、页面向iframe传递参数，简单的方法直接放到url里传过去。
（ iframe会在本地浏览器缓存，建议加一个type等于一个随机数，以便请求的是最新的iframe）

<iframe ref="iframe" 
src="https://127.0.0.1:8080?mchId=1&type='+Math.random()*10" id="mapDiv"  frameborder="0"></iframe>

2、iframe向父页面传递参数
iframe里使用

//像父窗口发送信息
window.parent.postMessage(param, "*");

父页面里监听方法，

window.addEventListener("message", function (e) {
console.log(e.data)
//如果页面有两个以上的iframe层可以根据不通的iframe来源做不同的操作
      if(e.origin == 'http://127.0.0.1:8080'){
        that.handleHideStatus(e.data);
      }
    });

下面上代码
iframe:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" id='title' placeholder="请输入标题">
			<input type="text" id='content' placeholder="请输入内容">
			<p id="btn"></p>
		</div>
		<script language="javascript" src="./js/jquery-2.1.4.min.js"></script>
		<script>
			$(function(){
				$('#btn').click(function(){
					var title=$('#title').html()
					var content=$('#content').html()
					var param={title:title,content:content}
					//像父窗口发送获取到的信息
					window.parent.postMessage(param, "*");
				})
			})
		</script>
	</body>
</html>

父页面的代码：
（这里用的时vue,监听事件写在mounted里，jq就直接写在初始化函数里）

<template>
	<div class="app-container" >
		<el-dialog title="iframe" :visible.sync="iframeShow">
			<iframe ref="iframe" :src="ctrourl" id="mapDiv" style="width: 100%;height: 340px" frameborder="0"></iframe>

		</el-dialog>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:500px" status-icon label-width="170px"
				 class="demo-ruleForm">

			<el-form-item label="标题" prop="title">
				<el-input type="text" v-model="ruleForm.title" @focus="onInputFocus()" placeholder="请输入"></el-input>
			</el-form-item>

			<el-form-item label="内容" prop="content">
				<el-input type="text" v-model="ruleForm.content" @focus="onInputFocus()" placeholder="请输入"></el-input>
			</el-form-item>


			<el-form-item>
				<el-button type="primary">确定</el-button>
				<el-button >取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				ruleForm: {
					title:'',
					content:''
				},
				ctrourl:'https://127.0.0.1:8080?&type='+Math.random()*10,
				iframeShow:false,
			};
		},
		created() {
		},
		mounted() {
			var that=this;
			//监听iframe传递过来的信息
			window.addEventListener("message", function (e) {
			  if(e.origin == 'https://127.0.0.1'){
			  //从iframe 接收的信息进行处理
				that.handleHideStatus(e.data);
			  }
			});
		},
		methods: {
			handleHideStatus(obj){
				this.iframeShow=false
				console.log(JSON.stringify(obj))
				this.content=obj.content
				this.title=obj.title
			},
			onInputFocus(type){
				this.iframeShow=true
			},
		}
	}

</script>
<style type="scss" scoped="scoped" less="scss">

</style>

青衣浏阳

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
iframe和页面之间的通信

开发时遇到需要引入第三方iframe层，并且需要有数据交互。1、页面向iframe传递参数，简单的方法直接放到url里传过去。（ iframe会在本地浏览器缓存，建议加一个type等于一个随机数，以便请求的是最新的iframe）<iframe ref="iframe" src="https://127.0.0.1:8080?mchId=1&type='+Math.random()*10" id="mapDiv" frameborder="0"></iframe>
复制链接

扫一扫