postMessage
postMessage是Html5引入的新API，可以安全地实现跨源通信。(跨页面/窗口/源等)
1
| otherWindow.postMessage(message, targetOrigin);
|
message
要发送的数据，要求是字符串
targetOrigin
目标窗口的源，包括协议+主机+端口号
使用方法
这里要实现A域和B域进行跨源访问localStorage，必须要引入第三者C域
A域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A-页面</title>
<style>
#child{
display: none;
}
</style>
</head>
<body>
<h2>A-页面</h2>
<div>
<label for="">Key</label>
<input type="text" placeholder="输入key" id="itemKey">
</div>
<div>
<label for="">Value</label>
<input type="text" placeholder="输入value" id="itemValue">
</div>
<div>
<button id="add">添加</button>
</div>
<iframe id="child" src="http://c.test.com/"></iframe>
<script>
var add = document.getElementById("add");
add.addEventListener('click',function () {
var itemKey = document.getElementById("itemKey").value;
var itemValue = document.getElementById("itemValue").value;
if (itemKey && itemValue){
window.frames[0].postMessage(JSON.stringify({type:"set",key: itemKey ,value: itemValue}),'*');
alert('添加成功');
}else {
alert('请输入key或者value');
}
});
</script>
</body>
</html>
|
B域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>B-页面</title>
<style>
#child{
display: none;
}
</style>
</head>
<body>
<h2>B-页面</h2>
<div>
<label for="">Key</label>
<input type="text" placeholder="输入key" id="itemKey">
</div>
<div>
<button id="getValue">获取</button>
</div>
<div id="itemValue"></div>
<iframe id="child" src="http://c.test.com/"></iframe>
<script type="text/javascript">
var getValue = document.getElementById("getValue");
getValue.addEventListener('click',function () {
var itemKey = document.getElementById("itemKey").value;
var itemValue = document.getElementById("itemValue");
if (itemKey){
window.frames[0].postMessage(JSON.stringify({type:"get",key:itemKey}),'*');
window.addEventListener('message', function(e) {
if (e.origin && e.origin === 'http://c.test.com'){
var data = e.data;
itemValue.innerHTML = 'value为' + data;
}
}, false);
}else {
alert('请输入key');
}
});
</script>
</body>
</html>
|
C域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>C-页面</title>
</head>
<body>
<h2>C-页面</h2>
<script>
;(function (win) {
win.addEventListener("message",function(evt){
if(win.parent!= evt.source){ return }
var options=JSON.parse(evt.data);
if(options.type === "get"){
var data = win.localStorage.getItem(options.key);
win.parent.postMessage(data, "*");
}
if(options.type === "set"){
win.localStorage.setItem(options.key,options.value);
}
if(options.type === "remove"){
win.localStorage.removeItem(options.key);
}
if(options.type === "clear"){
win.localStorage.clear();
}
},false);
})(window);
</script>
</body>
</html>
|
结果
