当前页面js与另一服务js，跨域问题解决方案

最新推荐文章于 2022-05-03 18:30:54 发布

半仙code

最新推荐文章于 2022-05-03 18:30:54 发布

阅读量334

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/liz9411/article/details/82251005

版权

JS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

网上解决跨域问题的文章有很多，但是大多数都是页面与后台服务器的跨域问题，与我们要解决的问题没有太多的相关性。

本文就不同服务js交互问题为核心给出解决方案。

话不多说，先上代码：

1./Demo01/WebContent/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
</head>


<body>
ssssss
<iframe id="iframe" src="http://127.0.0.1:8086/Demo02/index.html"></iframe>
<script>

document.getElementById('iframe').onload = function(){
    var win = document.getElementById('iframe').contentWindow;
    var obj=new Object();
    obj.kk="数据1";
    obj.jj="数据2";
    win.postMessage(obj,"http://127.0.0.1:8086/Demo02/index.html")
}
    
    
    
</script>
</body>
</html>

2./Demo02/WebContent/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script >
    $(document).ready(function() {
	
	window.onmessage = function(e){
	    e = e || event;
	    console.log(e.data);//我是来自a页面的
	}
    });
</script>

<body>
aaaaaa


</body>
</html>

注解：/Demo01/WebContent/index.html是父页面，/Demo02/WebContent/index.html是子页面

结果：

经过实测，本方法适用于主流浏览器（谷歌|火狐|IE）放心使用。

解析：

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个 MessageEvent 消息。该MessageEvent消息有四个属性需要注意： message 属性表示该message 的类型； data 属性为 window.postMessage 的第一个参数；origin 属性表示调用window.postMessage() 方法时调用页面的当前状态； source 属性记录调用 window.postMessage() 方法的窗口信息