iframe父子页面的调用方法与传值

最新推荐文章于 2024-04-23 19:29:15 发布

电五@幽月轮月筱

最新推荐文章于 2024-04-23 19:29:15 发布

阅读量1k

点赞数

分类专栏：学习遇到的问题文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_43645543/article/details/106058273

版权

学习遇到的问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

iframe父子页面的调用方法传值

- 前言

前言

一天，遇到一个需求，一个服务器里又很多工程，然后想实现一个工程里的页面可以调用另一个工程里的某个弹框。含有弹框的工程使用vue写的，然后。。。想到了一个办法就是用 iframe标签

父页面

<body>
		<button onClick="fun()">点我</button>
		<div id="first"></div>
		<script>
				function fun() {
					$.ajax({
						url:'',
						type:'get',
						data:{},
						success:function(res){
							console.log('666',res.data)
							//这里的res.data就是后台传来的iframe
							$('#firsts').html(res.data)
						}

					})
				}
			/*
			*这里 向iframe 调用的方法
			* ==》iframe里的子页面
			*/	
			
			function lookme(){
				//或者 给iframe 加上id=“xxx”,通过选择 $("#xxx").postMessage()
				window.frames[0].postMessage('xxx','xxx');
			}			


			/*
			*这里 接收iframe 调用的方法 子页面要调用的方法
			*当操作iframe里面的按钮后，需要删除这个iframe
			*这里是 iframe子页面发数据到 ==》父页面  接收 
			*/
			window.addEventListener('message',function(e){
				console.log(e);//子页面传来的 接收参数在e里面
               $('#firsts').empty();//清空iframe
            },false);
		</script>
</body>

弹框页面（子页面）

//本页面是iframe 里的
//...省略页面文章
//这里需要用到监听事件 ********************监听*************
mounted(){
	//接受 父页面 传来的参数并调用 本页面的方法
	var _this = this;
	//这里监听 就像父页面定义的方法 
	window.addEventListener('message',function(e){
		//然后可以在这里调用 methods里的方法
		console.log(e);//传来的参数在e里面
		_this.he();
		
		//这句话是调用父页面的 message 的方法（子页面给父页面传值）
       window.parent.postMessage('xxxx','*');
     },false);
}，
methods:{
	he(){
		console.log('我是将被父页面调用的 方法')
	}
}

最后

postMessage()
这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

data:要传递的数据，传递参数的时候需要使用JSON.stringify()序列化，在低版本IE中引用json2.js可以实现类似效果。

origin：字符串参数，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

注意

同一页面的同一个iframe 然后一个是通过点击事件使用postMessage触发没问题，然后试了一下当页面加载的时候就调用发现触发不了

1.难道只能通过点击事件才能触发吗？
2.页面已经把iframe渲染完了，所以触发了但没监听到？（但为啥点击的时候又可以监听到了）

搞了半天没解决明白，希望大神给解决一下，但是我想一加载就传参数怎么解决？随后我就在iframe的src通url拼接上了参数

电五@幽月轮月筱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
iframe父子页面的调用方法与传值

iframe父子页面的调用方法传值前言父页面弹框页面（子页面）最后前言一天，遇到一个需求，一个服务器里又很多工程，然后想实现一个工程里的页面可以调用另一个工程里的某个弹框。含有弹框的工程使用vue写的，然后。。。想到了一个办法就是用 iframe标签父页面<body> <button onClick="fun()">点我</button> <div id="first"></div> <script>
复制链接

扫一扫