还真是头一回听到跨文档消息传递（XDM）这回事儿，新鲜极了！你看咱们做网页时，老是要把数据从这个页面传到另一个页面，有时候iframe嵌套或者弹出框也会加入进来。不过别担心，XDM就像个传送门，让这些独立的页面之间可以相互沟通，安全又高效！
那时，我在弄个网页，需要让主页和内嵌的iframe共用登录状态。试过好多方法，但感觉都不安全，可能会被黑客攻击（比如那个叫”跨站脚本攻击”的东西，真烦！）。后来学到了一招，就是postMessage()，这东西威力不小，不仅可以只发送给指定网址的消息，还能防止信息泄露或窃取。
理解postMessage()的精髓
你用-PostMessage()函数传消息？记得看清楚那两个参数喔。首先是你要说啥，也就是那个字符串啦；然后是给你想说的人，也就是他的域名。这个域名可厉害了，它就像是把锁，只有知道密码（即拥有该域名）的人才可以打开，这样才能确保我们聊天很安全滴！
有次我调程序时，不小心把第二个参数打成了“*”，结果忘了看仔细了，乱写一气。想想也觉得挺有意思，连我家楼下小卖部都能看到我电脑上发出来的信息。其实，刚开始还觉得挺好玩儿的，但后来想想，这有点儿危险！所以说，咱们在搞开发的时候，一定要时刻警惕着！
//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]
//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")
事件触发的奥秘
在XDM里面，收信息就靠弹出窗口的message事搞定！不过网络不好的话可能会有小卡顿，所以大家要留意~
上次，关键功能消息传太慢了让用户不满意。为了解决这个问题，咱深入了解了下消息处理流程，对代码做了提升和精简，去掉没用的传输数据，这下消息飞起来了！
安全第一：验证消息来源
咱们总是要用XDM传递消息，确定身份可重要了。每回我收到消息并处理时，都会查查它从哪儿发出的，只有确定是可信网站的，我才能安心哟~
上次忘了检查消息来源，结果被人在网站上放了恶意脚本，导致大麻烦。所以说，再小的防护措施都不能掉以轻心！
数据的传输：字符串与结构化数据
最早的POSTMessage方法只支持字符串传输，但实际操作时，我们可能需要传输更多信息。这时候我就学会了使用JSON.stringify()来把想发的数据打包成字符串，然后接手方再用JSON.parse()把它们解开还原回来。
这方法虽然有点儿复杂，但确实能确保数据传输的准确性和安全性。我就用这种方法搞定了好几个项目，效果还挺好的～
XDM在实际项目中的应用
window.addEventListener('message',function(event){
//确保发送消息的域名是已知的域名
if(event.origin == "http://blog.csdn.net/lee_magnum"){
//处理接收到的数据
processMessage(event.data);
//可选：向来源窗口发送回执
event.source.postMessage("收到了", "http://www.leemagnum.com");
}
}, false);
就是嘞，用了XDM这货就不用愁文档通信，用户登录，交互功能，统统不在话下！
真的，会用XDM让开发效率提升了好多，网页应用的安全性也跟着飙升！以后得更加努力学习，提高这方面的技巧！
对未来的展望
网络火得不行了，跨文档消息传递也要开始普及咯。身为程序猿的我得多学习点儿新知识，这样就能把这个变成网上更安全、更轻松的操作了。
评论0