window.postMessage在两个网页间传递数据
2020-03-17 本文已影响0人
若水亦城空
数据发送端
<template>
<div class="add-interactive main-content">
<div>
<input type="button" value="发送" @click="sendPost()" />
<iframe
src="http://192.168.0.159/1111.html"
id="otherPage"
style="display:none"
></iframe>
</div>
</div>
</template>
<script>
export default {
name: "aaa",
data() {
return {
timer: "",
value: 0
};
},
mounted() {
this.timer = setInterval(this.get, 1000);
},
methods: {
get() {
// 监听跨域请求的返回
window.addEventListener(
"message",
function(event) {
console.log("返回值: ", event.data);
},
false
);
},
sendPost() {
// 获取id为otherPage的iframe窗口对象
var iframeWin = document.getElementById("otherPage").contentWindow;
// 向该窗口发送消息
iframeWin.postMessage(
"dhjskahdjsahdskahdjskahd",
"http://192.168.0.159/1111.html"
);
//let baseToken = store.getters.baseToken;
}
}
};
</script>
<style scoped lang="less">
@name: add-interactive;
</style>
数据接收端
sessionstorage （回话级别 不行 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>POST Handler</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/JavaScript">
window.addEventListener('message',function(event) {
if(event.origin !== 'http://192.168.0.107:8100') return;
localStorage.setItem('token',event.data)
console.log('收到值: ' + event.data,event);
event.source.postMessage('返回登录信息',event.origin);
},false);
</script>
</head>
<body>
</body>
</html>
出现 webpack 引起的 请求问题
window.addEventListener(
'message',
function (event) {
if (event.data.type !== 'webpackWarnings') {
if (event.origin !== window.baseURL.postMessageUrl) return
localStorage.setItem('authorization', event.data)
console.log(event.data, 'event.data的值')
//获取登录信息 （ 验证token 有效 ）
LoginApi.getUserInfo({ params: { authorization: event.data } }).then(res => {
console.log(res, '获取用户信息')
if (res.code === 200) {
// res.code === 200
setUser(res.data)
// 返回门户
// var iframeWin = document.getElementById("app").contentWindow;
event.source.postMessage('gongToken', window.baseURL.postMessageUrl)
} else {
event.source.postMessage('gongError', window.baseURL.postMessageUrl)
// window.location.href = window.baseURL.zfwloginUrl
}
})
}
// event.source.postMessage('', event.origin)
},
false
)
