iframe和页面之间的通信

以你之姓@ 2022-10-30 13:22 442阅读 0赞

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