跨域杂谈

现代浏览器对于跨域限制是越来越多了,iframe中无法使用cooike等等问题,网上找了目前的写法,记录下来。

第一种的兼容性大于第二种。

window.postMessage

窗口1 端口:5050

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>主页面</h2>
<iframe id="contentIframe" src="http://localhost:5051/demo/b.html"></iframe>
</body>
<script type="text/javascript">

window.onload = function() {
console.log('window页面发送消息')
console.log(document.getElementById('contentIframe'))
document.getElementById('contentIframe').contentWindow.postMessage(
{
code: 1,
msg: 'Hello b, i am window.html'
},
"http://localhost:5051"
);
};

window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin === 'http://localhost:5051') {

console.log('window页面收到消息:' + event.data.msg)

}
}, false);


</script>

</html>

窗口2 端口:5051

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, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span>我是b页面</span><br>
<input type="button" value="回消息" onclick="postmsg()">
</body>
<script type="text/javascript">

let parent = null;
let origin = null;

window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin === 'http://localhost:5050') {

parent = event.source
origin = event.origin

console.log('b页面收到消息:' + event.data.msg)

}
}, false);

/**
* 回消息方法
*
* 假设你已经验证了所受到信息的origin (任何时候你都应该这样做),
* 一个很方便的方式就是把event.source作为回信的对象,
* 并且把event.origin作为targetOrigin
*/
function postmsg() {
console.log('b页面回消息')
parent.postMessage({
code: 1,
msg: 'hi, i am b.html'
}, origin)
}

</script>
</html>

详情文档 postMessage

Channel Messaging API

主页面

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
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Channel messaging demo</title>
</head>

<body>
<h1>Channel 代码</h1>
来自子页面的消息:
<p class="output">Index页面</p>
<iframe src="page2.html" width="480" height="320"></iframe>
<script>
const channel = new MessageChannel();
const output = document.querySelector('.output');
const iframe = document.querySelector('iframe');

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from the main page!", "*", [
channel.port2,
]);
}

// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
</script>
</body>

</html>

子界面

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
<!DOCTYPE html>
<html lang="en-US">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>My page title</title>
</head>

<body>
<h3>Iframe页面</h3>
来自主页面的消息:<p class="output">iFrame 页面</p>
<script>
const output = document.querySelector(".output");

window.addEventListener("message", onMessage);

function onMessage(e) {
output.innerHTML = e.data;
// Use the transfered port to post a message back to the main frame
e.ports[0].postMessage("Message back from the IFrame");
}
</script>
</body>

</html>

详情文档 ChannelMessaging

封面