postMessage解决跨域问题

最新推荐文章于 2024-08-08 22:17:44 发布

Anita-Sun

最新推荐文章于 2024-08-08 22:17:44 发布

阅读量407

点赞数 1

分类专栏：跨域

本文链接：https://blog.csdn.net/AnitaSun/article/details/117969807

版权

Express 静态资源跨域通信 postMessage iframe

关键词由CSDN通过智能技术生成

跨域专栏收录该内容

15 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    开放静态资源可以分别获取端口下的所有资源
server1.jslet express = require('express'),
	app = express();
app.listen(1001, _ => {
	console.log('OK!');
});
app.use(express.static('./'));
 
server2.jslet express = require('express'),
	app = express();
app.listen(1002, _ => {
	console.log('OK!');
});
app.use(express.static('./'));
 
A.html<body>
	<iframe id="iframe" src="http://127.0.0.1:1002/MESSAGE/B.html" frameborder="0" style="display: none;"></iframe>
	<script>
		// 第一个参数是发送的信息，第二个参数是指定源
		iframe.onload=function(){
			iframe.contentWindow.postMessage('珠峰培训', 'http://127.0.0.1:1002/');
		}

		// => 监听B传递的信息
		window.onmessage = function (ev) {
			console.log(ev.data);
		}
	</script>
</body>
 
B.html<body>
	<script>
		window.onmessage = function (ev) {
			// 接受A发送来的信息
			console.log(ev.data);
			// 给A发送信息
			ev.source.postMessage(ev.data + '@@@', ev.origin);
		}
	</script>
</body>
 

                