前言
一天,遇到一个需求,一个服务器里又很多工程,然后想实现一个工程里的页面可以调用另一个工程里的某个弹框。 含有弹框的工程使用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拼接上了参数