TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之跨文档消息通信

zyz
2019-01-09
/
0 评论
/
806 阅读
/
正在检测是否收录...
01/09

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

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

  • 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);
      });
    }
赞(0)
评论 (0)