04、HTML5-跨文档消息通信

(关于跨域通信问题，先要将服务器配置好，添加两个不同域名，方便操作)

一、跨文档消息通信(同域名)

• iframe

01-窗口通信.html
<iframe id="myFrame" src="01-test.html"></iframe>

  <!-- 可以通过js去访问被包含页面的DOM元素 -->
  <script>
  window.onload = function() {
    var myIframe = document.getElementById("myFrame");

    // 改变子页面的背景
    document.onclick = function() {
      // 要操作iframe中的dom元素，先获取到iframe引入的window对象  ----->  contentWindow
      myIframe.contentWindow.document.body.style.background = 'purple';
    }
  }
</script>

01-test.html
  <script type="text/javascript">
  window.onload = function(){
      var oBt1 = document.getElementById("bt1");
    
       // 改变父页面的背景
      document.onclick = function(){
          // 要访问父元素的window对象 -----> parent
          window.parent.document.body.style.background = 'blue';
      }
   }
  </script>

contentWindow: 父页面访问子页面的window对象
window.parent: 如果当前页面没有被其他页面包含，即parent就是当前页面的window对象；如果被包含了，则parent就是当前页面的父级页面window对象;
window.top: 指的是顶级页面；

• window.open

04-窗口通信.html
<script type="text/javascript">
    window.onload = function(){
    var oBt1 = document.getElementById("bt1");
    var oBt2  = document.getElementById("bt2");
    var openW = null;
                
    oBt1.onclick = function(){
      // 通过open方法是会返回新建窗口的window对象的
      openW = window.open('04-test.html', '_blank');
    }
                
    // 改变子页面的背景
    oBt2.onclick = function(){
      // 即可以通过返回的window对象进行对应操作
      openW.document.body.style.background = 'purple';
    }
  }
  </script>

04-test.html
  <script type="text/javascript">
    window.onload = function(){
      var oBt1 = document.getElementById("bt1");
                
      oBt1.onclick = function(){
        // window.opener: 通过window.open方法打开当前页面的window对象
        window.opener.document.body.style.background = 'red';
      }
    }
</script>

window.open: 返回的window即是子窗口对象 (子页面)
window.opener: 过window.open方法打开当前页面的window对象 (父页面)

二、跨文档消息通信(不同域名) postMessage

• 发送数据postMessage
  可以通过postMessage方法给另外一个窗口发送消息；

操作方式:  接收消息的窗口对象window.postMessage(发送的数据， 接收的域)

  var oFrame = document.getElementById('myFrame');
  document.onclick = function(){
    // 注意写上协议，不然会报错
    oFrame.contentWindow.postMessage('123', 'http://www.b.com');
  }

oFrame.contentWindow.postMessage('123', '*');即表示接受域没有限制；

• 接收消息事件message

- ev.origin: 发送数据来源的域
  - ev.data: 发送的数据

  window.onload = function(){
    // 监听message事件
    window.addEventListener('message', function(ev){
        ev = ev || window.ev;
        console.log(ev.origin + ':' + ev.data);
    });
  }

三、跨文档消息通信(不同域名) XMLHttpRequest

• XMLHttpRequest解决跨域问题

在服务端需要设置一个header属性，允许访问该资源的域，例如:
<?php
    // 允许访问该资源的域
    header('Access-Control-Allow-Origin:http://www.a.com');
    echo 'hello';
?>

• 非IE中跨域请求

// 非IE跨域
  var request = new XMLHttpRequest();
  request.open('GET', 'http://www.b.com/HTML5/b/03-test.php', true);
  request.send();
  // 可以直接使用onload方法，而不需要onreadystatechange
  request.onload = function(){
      alert(request.responseText);
  }

• IE中跨域请求

// IE跨域
  var request = new XDomainRequest();
  request.open('GET', 'http://www.b.com/HTML5/b/03-test.php', true);
  request.send();
  request.onload = function(){
      alert(request.responseText);
  }

• ajax无刷新上传

<script type="text/javascript">
  window.onload = function(){
    // <input type="file" id="myFile" />
    var oFile = document.getElementById("myFile");
    var oBt = document.getElementById("bt");
                
    oBt.onclick = function(){
      // 文件列表: oFile.files

      var request = new XMLHttpRequest();
                    
      request.open('POST', 'upload_file.php', true);

      // 上传进度
      var oUpload = request.upload;
      oUpload.onprogress = function(ev){
        ev = ev || window.event;
        console.log(ev.total + ":" + ev.loaded);    
      }
                    
      // 设置请求方式
      request.setRequestHeader('X-Request-With', 'XMLHttpRequest');
  
      // 通过FormData来构建提交数据(二进制)
      var oFormData = new FormData();
      oFormData.append('file', oFile.files[0]);
      request.send(oFormData);
                
      request.onload = function(){
          alert('文件上传成功‘);
      }
    }
  }
  </script>

FormData: 将数据格式化对象
var oUpload = request.upload; // 上传相关属性
oUpload.onprogress = function(ev){} // 上传进度相关
ev.total: 待发送的数据大小
ev.loaded: 已发送的数据大小