前几天写了HTML5的俄罗斯方块，其实也不是想好好练一下HTML5，其实真正是想把HTML5的socket通信功能好好熟悉一下，当然喽，下一步也就是HTML5俄罗斯方块的网络对战版，敬请期待哦（网址http://www.9k6.net/games）
今天尝试了一下html5的postMessage功能，一度出现了代码出错的问题，结合出现的错误，在这里给大家分享一下，以便大家遇到类似问题时不会抓耳挠腮~~
两个页面，index.html和inner.html，其中在index中使用iframe调用inner.html页面。最初写的代码如下（出错的代码）
index.html
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Communication</title> 6 <script type="text/javascript"> 7 function $$(id){ 8 return document.getElementById(id); 9 } 10 function sendMess(){ 11 var str = 'Yes,you are right'; 12 var targetOrigin = 'localhost'; 13 var win = $$('inner1').contentWindow; 14 win.postMessage(str,targetOrigin); 15 } 16 </script> 17 </head> 18 <body> 19 <div> 20 <input type="button" onclick="sendMess();"> 21 </div> 22 <iframe id="inner1" src="inner.html"></iframe> 23 </body> 24 </html>
inner.html
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript"> 6 function getMess(){ 7 window.addEventListener('message',function(e){ 8 alert(e.origin); 9 if (e.origin == 'http://localhost') { 10 alert(e.data); 11 }; 12 }) 13 } 14 </script> 15 </head> 16 <body onload="getMess();"> 17 </body> 18 </html>
将这两句代码放入本地的apache目录中，然后打开Chrome和firefox调试，结果bug~~~
Chrome和firefox的出错信息如下：
Chrome:Uncaught Error: SYNTAX_ERR: DOM Exception 12
firebug:SyntaxError: An invalid or illegal string was specified
最后，开始狂找google+百度，最后看人家的origin都是*，索性尝试一下也改成了*，结果真的OK了~~~
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Communication</title> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function sendMess(){ var str = 'Yes,you are right'; var targetOrigin = '*'; var win = document.getElementById('inner1').contentWindow; win.postMessage(str,targetOrigin); } </script> </head> <body> <div> <input type="button" onclick="sendMess();"> </div> <iframe id="inner1" src="inner.html"></iframe> </body> </html>
debug N久，就以为一个*啊？？？？！！当时那个表情啊~~
后来尝试了一下，发现localhost作为origin是不行的，需要使用http://localhost(写origin时一定要加上http，本例也是一样的)。
总结一下原因，就是postMessage的origin是http://localhost而不是localhost，如果使用了不正确的origin，注定会出错！！