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

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

• 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
    parent.document.body.style.background = 'blue';
    }
     }
    </script>

  > contentWindow: 父页面访问子页面的window对象
  > parent: 如果当前页面没有被其他页面包含，即parent就是当前页面的window对象；如果被包含了，则parent就是当前页面的父级页面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对象 （父页面）
  

二、Mac下Apache多站点配置

• Apache基本操作

  sudo apachectl start    # 开启Apache服务
  sudo apachectl stop        # 停止Apache服务
  sudo apachectl restart    # 重启Apache服务

  Mac下默认是有安装好Apache的！

• 开启虚拟端口

  ## Apache配置文件 /private/etc/apache2/httpd.conf
  sudo vi /private/etc/apache2/httpd.conf
  
  ## 找到以下内容,将 `# Include /private/etc/apache2/extra/httpd-vhosts.conf`前面的 '#' 去掉
  # Virtual hosts
  # Include /private/etc/apache2/extra/httpd-vhosts.conf

• 添加虚拟端口的地址

  ## 配置文件 /private/etc/apache2/extra/httpd-vhosts.conf
  sudo vi /private/etc/apache2/extra/httpd-vhosts.conf
  
  
  ## 参考下面进行修改，其中`DocumentRoot`站点资源所在路径； `ServerName`域名
  <VirtualHost *:80>
      ServerAdmin webmaster@dummy-host.example.com
      DocumentRoot "/Library/WebServer/Documents/a"
      ServerName www.a.com
      ErrorLog "/private/var/log/apache2/dummy-host.example.com-error_log"
      CustomLog "/private/var/log/apache2/dummy-host.example.com-access_log" common
  </VirtualHost>
  
  <VirtualHost *:80>
      ServerAdmin webmaster@dummy-host2.example.com
      DocumentRoot "/Library/WebServer/Documents/b"
      ServerName www.b.com
      ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
      CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
  </VirtualHost>

• 映射操作

  ## 配置文件 /private/etc/hosts
  sudo vi /private/etc/hosts
  
  ## 文件末尾添加
  127.0.0.1 www.a.com
  127.0.0.1 www.b.com

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

• 发送数据postMessage

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

  操作方式:  接收消息的窗口对象window.postMessage(发送的数据， 接收的域)
  
  var oFrame = document.getElementById('myFrame');
  document.onclick = function(){
    // 注意写上协议，不然会报错
    oFrame.contentWindow.postMessage('123', 'http://www.b.com');
  }

• 接收消息事件message

  - ev.origin: 发送数据来源的域
  - ev.data: 发送的数据
  
  window.onload = function(){
    // 监听message事件
    window.addEventListener('message', function(ev){
    ev = ev || window.ev;
    console.log(ev.origin + ':' + ev.data);
    });
  }