HTML5解决跨域方案之postMessage-hbsxjs-ChinaUnix博客

6080新视觉的ChinaUnix博客

首页　| 　博文目录　| 　关于我

hbsxjs

博客访问： 266197
博文数量： 81
博客积分： 0
博客等级：民兵
技术积分： 878
用户组：普通用户
注册时间： 2014-07-25 23:20

文章分类

全部博文（81）

c#（23）
系统（46）
seo（2）
未分配的博文（10）

文章存档

2017年（45）

2016年（20）

2015年（2）

2014年（14）

我的朋友

manshukw

postMessage()方法可以使不同源的脚本采用异步方式进行数据传递

两个参数

data

传递的数据，在传递参数的时候需要使用JSON.stringify()方法将对象参数序列化

origin

目标的源，协议，主机，端口号

将主页面和次级页面分别用node或者其他方法启动起来查看效果

详细说明在代码注释中

主页面

<body> <input type="button" value="点击发送数据到postmessage_01.html" onclick="sendInfoToAnotherDomain();"/> <iframe width="1200" src="">iframe> <script> function sendInfoToAnotherDomain(){ var personInfo= new Object; // 要发送的数据  personInfo.name='Yuelu';  
        personInfo.title='Hello';   
        personInfo.info="World"; var str=JSON.stringify(personInfo); // 获取iframe  var iframe=window.frames[0]; /**
         * [http description]
         * @type {[type]} 要发送的数据， 目标url
         */ // 传递数据 iframe.postMessage(str,'');   
    } script> body>

次级页面(iframe)

"; personInfoString+="姓名是: "+name+"
"; personInfoString+="标题为： "+title+"
"; personInfoString+="信息为： "+info+"
"; document.body.innerHTML=personInfoString; } ); } " title="" data-original-title="复制" style="box-sizing:border-box;cursor:pointer;display:block;float:left;height:16px;width:16px;margin:4px 5px;opacity:0.5;background-image:url();background-size:auto 16px;background-position:-16px 0px !important;">

<body onload="receiveInfoFromAnotherDomain();"> <p>postmessage_01p> body> <script> function receiveInfoFromAnotherDomain(){ //监听窗口对象的message事件  window.addEventListener("message",function(ev){ //判断是否来自指定的url if(ev.origin !=""){ console.log("the event doesn't come from Domain1!"); return;   
          } console.log(ev.data); //将json字符串转为json对象 var personInfoJSON = JSON.parse(ev.data); var name = personInfoJSON.name; var title = personInfoJSON.title; var info = personInfoJSON.info; //构造信息文本并显示 var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"
";   
          personInfoString+="姓名是: "+name+"
";   
          personInfoString+="标题为：  "+title+"
";   
          personInfoString+="信息为：  "+info+"
"; document.body.innerHTML=personInfoString;              
          }              
      );          
  } script>

阅读(1660) | 评论(0) | 转发(0) |

上一篇：浏览器发送http请求过程分析

下一篇：实例分析MySQL下的四种事务隔离级别

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6