美文网首页
04、HTML5-跨文档消息通信

04、HTML5-跨文档消息通信

作者: 王梓懿_1fbc | 来源:发表于2018-10-20 14:50 被阅读0次

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

    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: 已发送的数据大小
    

    作者:西门奄
    链接:https://www.jianshu.com/u/77035eb804c3
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    相关文章

      网友评论

          本文标题:04、HTML5-跨文档消息通信

          本文链接:https://www.haomeiwen.com/subject/eiwpzftx.html