html5的跨域问题（通讯）

1)向另外一个iframe发送消息
var message = 'hello，RIA之家！   ' + (new Date().getTime()); 
        window.parent.frames[1].postMessage(message, '*');


iframe1.html需要向iframe2.html发送消息，也就是第二个iframe，所以是window.parent.frames[1]，如果是向父页面发送消息就是window.parent。
postMessage这个函数接收二个参数，缺一不可，第一个参数即你要发送的数据，第二个参数是非常重要，主要是出于安全的考虑，一般填写允许通信的域名，这里明河为了简化，所以使用’*'，即不对访问的域进行判断。


2)另外一个iframe监听消息事件
iframe2.html中写个监听message事件，当有消息传到iframe2.html时就会触发这个事件。


var onmessage = function(e) { 
       var data = e.data,
       p = document.createElement('p'); 
       p.innerHTML = data; 
       document.getElementById('display').appendChild(p); 
    }; 
    //监听postMessage消息事件 
    if (typeof window.addEventListener != 'undefined') { 
      window.addEventListener('message', onmessage, false); 
    } else if (typeof window.attachEvent != 'undefined') { 
      window.attachEvent('onmessage', onmessage); 
    }


整个通信过程就结束了！是不是非常简单惬意！
如果你有加域名限,比如下面的代码：


window.parent.frames[1].postMessage(message, 'http://www.36ria.com');


就要在onmessage中追加个判断：
if(event.origin !== http://www.36ria.com') return;






什么是跨域


JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。






document.domain = 'a.com';  var ifr = document.createElement('iframe');  ifr.src = 'http://script.a.com/b.html';  ifr.style.display = 'none';  document.body.appendChild(ifr);  ifr.onload = function(){      var doc = ifr.contentDocument || ifr.contentWindow.document;      // 在这里操纵b.html      alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);  }; 




function startRequest(){      var ifr = document.createElement('iframe');      ifr.style.display = 'none';      ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';      document.body.appendChild(ifr);  }   function checkHash() {      try {          var data = location.hash ? location.hash.substring(1) : '';          if (console.log) {              console.log('Now the data is '+data);          }      } catch(e) {};  }  setInterval(checkHash, 2000); 
 


//模拟一个简单的参数处理操作  switch(location.hash){      case '#paramdo':          callBack();          break;      case '#paramset':          //do something……          break;  }   function callBack(){      try {          parent.location.hash = 'somedata';      } catch (e) {          // ie、chrome的安全机制无法修改parent.location.hash，          // 所以要利用一个中间的cnblogs域下的代理iframe          var ifrproxy = document.createElement('iframe');          ifrproxy.style.display = 'none';          ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下          document.body.appendChild(ifrproxy);      }  } a.com下的域名cs3.html


//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值  parent.parent.location.hash = self.location.hash.substring(1);