PostMessager来对子父窗体进行跨域

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PostMessager来对子父窗体进行跨域相关的知识，希望对你有一定的参考价值。

一.为什么需要使用postMessage这个跨域技术

对于一个普通的页面而言，如果页面中的数据量太多时，会导致某个页面的数据量太多 二显得特别的臃肿，所以通常是使用iframe的方式来加载子页面，但是我们使用了iframe来加载子页面后，通常又涉及到子页面与父页面直接的信息的交替，比如我的父页面中有许多的功能时，会导致页面中的表单、表格、对话框（dialog）就很多，我们通常会将某些它们单独的分配到其他的子页面中去，如添加表单，但是当我们的表单添加功能，父页面是显示数据库中的数据同时包含了添加的数据，这时如果想要我的子页面中的表单提交后，我的父页面中的表格也相对的进行刷新同步时，我们就涉及到了子页面和父页面之间的信息的交互问题，这时我们通常是使用postMessage来进行交互。

二、使用postMessage常用的步骤

　　1、在父页面添加监听

　　//事件监听

  window.addEventListener(‘message‘,function(e){
      var mes = e.data;
      alert(mes);
     if(mes == "app_refresh"){
       mediaTableObj.refresh();
   }
 },false);

　　2、在子页面中当完成某个操作后进行交互中发送消息

　　//发送消息　

　　window.parent.postMessage("app_refresh",‘*‘);

三、具体的实例

A、父页面：

!DOCTYPE html>

<html>
　　<head>
　　　　<title>Post Message</title>
　　</head>
　　<body>
　　　　<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
　　　　　　<div id="color">Frame Color</div>
　　　　</div>
　　　　<div>
　　　　　　<iframe id="child" src="test2.html"></iframe>
　　　　</div>

<script type="text/javascript">
　　window.addEventListener(‘message‘,function(e){
　　　　var color=e.data;
　　　　console.log(e);
　　　　document.getElementById(‘color‘).style.backgroundColor=color;
　　},false);
</script>
</body>
</html>

B、子页面

<!doctype html>

<html>
　　<head>
　　<style type="text/css">
　　　　html,body{
　　　　　　height:100%;
　　　　　　margin:0px;
　　　　}
　　</style>
　　</head>
　　<body style="height:100%;">
　　　　<div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
　　　　　　click to change color
　　　　</div>

　　</body>
　　<script type="text/javascript">
　　　　var container=document.getElementById(‘container‘);
　　　　function changeColor () {
　　　　　　var color=container.style.backgroundColor;
　　　　　　if(color==‘rgb(204, 102, 0)‘){
　　　　　　　　color=‘rgb(204, 204, 0)‘;
　　　　　　}else{
　　　　　　　　color=‘rgb(204,102,0)‘;
　　　　　　}
　　　　　　container.style.backgroundColor=color;
　　　　　　window.parent.postMessage(color,‘*‘);
　　　　}
　　</script>
</html>

 

以上是关于PostMessager来对子父窗体进行跨域的主要内容，如果未能解决你的问题，请参考以下文章

在iframe中如何调用父窗体的方法？

审计：对子修改的父实体修订（Javers/Envers/... + Hibernate）

JS加载获取父窗体传递的参数

在wpf或winform关闭子窗口或对子窗口进行某个操作后刷新父窗口

具有递归 CTE 的 Postgres：在保留树结构的同时按受欢迎程度对子节点进行排序/排序（父节点始终高于子节点）

子元素初始化后，父组件对子 DOM 的操作导致 ExpressionChangedAfterItHasBeenCheckedError