04, HTML5-문서 간 메시지 통신

(다중 도메인 통신 문제에 관해서는 먼저 서버를 잘 설정하고 두 개의 다른 도메인 이름을 추가하여 조작하기 쉽도록 해야 한다.)

1. 문서 간 메시지 통신(도메인 이름)

iframe

01- .html


  <!--  js DOM  -->
  <disable_script>
  window.onload = function() {
    var myIframe = document.getElementById("myFrame");

    //  
    document.onclick = function() {
      //  iframe dom ， iframe window   -----&gt;  contentWindow
      myIframe.contentWindow.document.body.style.background = 'purple';
    }
  }
</disable_script>
</code></pre>  <pre><code>  01-test.html
  <disable_script type="text/javascript">
  window.onload = function(){
      var oBt1 = document.getElementById("bt1");
    
       //  
      document.onclick = function(){
          //  window  -----&gt; parent
          window.parent.document.body.style.background = 'blue';
      }
   }
  </disable_script>
</code></pre>  <br>콘텐츠 윈도우: 부모 페이지가 하위 페이지의 윈도우 대상 윈도우에 접근합니다.parent: 현재 페이지가 다른 페이지에 포함되지 않으면parent는 현재 페이지의 윈도우 대상입니다.포함된다면parent는 현재 페이지의 상위 페이지 윈도우 대상입니다.window.top: 최고급 페이지를 가리킨다.<li> window.open </li>  <pre><code>04- .html
<disable_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';
    }
  }
  </disable_script>
</code></pre>  <pre><code>04-test.html
  <disable_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';
      }
    }
</disable_script>
</code></pre>  <br>window.open: 되돌아오는 윈도우는 하위 창 대상 (하위 페이지) 윈도우입니다.opener: 윈도우를 건너세요.open 방법으로 현재 페이지의 윈도우 대상 열기 (부자 페이지)<br><h2> 、 ( ) postMessage</h2>  <li> 데이터postMessage를 보내면postMessage 방법을 통해 다른 창에 메시지를 보낼 수 있다.</li>  <pre><code> :   window.postMessage( ，  )

  var oFrame = document.getElementById('myFrame');
  document.onclick = function(){
    //  ， 
    oFrame.contentWindow.postMessage('123', 'http://www.b.com');
  }
</code></pre>  <br>oFrame.contentWindow.postMessage('123', '*');즉, 수락역에 제한이 없음을 나타낸다.<li> 메시지 이벤트 메시지 수신</li><pre><code>  - ev.origin:  
  - ev.data:  

  window.onload = function(){
    //  message 
    window.addEventListener('message', function(ev){
        ev = ev || window.ev;
        console.log(ev.origin + ':' + ev.data);
    });
  }
</code></pre>  <br><h2> 、 ( ) XMLHttpRequest</h2>  <li> XMLHttpRequest 도메인 간 문제 해결</li><pre><code> header ， ， :
<?php //  
    header('Access-Control-Allow-Origin:http://www.a.com');
    echo 'hello';
??>
</code></pre>  <li> IE 이외의 도메인 간 요청</li><pre><code>  //  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);
  }
</code></pre>  <li> IE에서 도메인 간 요청</li><pre><code>  // 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);
  }
</code></pre>  <li>ajax 업데이트 없음 업로드</li><pre><code><disable_script type="text/javascript">
  window.onload = function(){
    // &lt;input type="file" id="myFile" /&gt;
    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(' ‘);
      }
    }
  }
  </disable_script>
</code></pre>  <br>FormData: 데이터 포맷 객체 var oUpload = request.upload;//관련 속성 업로드 oUpload.onprogress = function (ev) {}//업로드 진행 관련 ev.total: 보낼 데이터 크기 v.loaded: 전송된 데이터 크기

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

04, HTML5-문서 간 메시지 통신

1. 문서 간 메시지 통신(도메인 이름)

좋은 웹페이지 즐겨찾기