JavaScript 크로스 도메인 요약: window.name_javascript 기술로 구현된 도메인 간 데이터 전송

직접 시도해 봤는데 정말 효과가 좋습니다. 구체적인 구현 방법은 다음과 같이 기록되어 있습니다

세 페이지가 있습니다:

a.com/app.html: 신청 페이지.
a.com/proxy.html: 일반적으로 콘텐츠가 없는 html 파일인 프록시 파일은 애플리케이션 페이지와 동일한 도메인에 있어야 합니다.
b.com/data.html: 애플리케이션 페이지가 데이터를 얻어야 하는 페이지를 데이터 페이지라고 부를 수 있습니다.

기본 구현 단계는 다음과 같습니다.

애플리케이션 페이지(a.com/app.html)에서 iframe을 생성하고 src가 데이터 페이지(b.com/data.html)를 가리키도록 합니다.
데이터 페이지는 이 iframe의 window.name에 데이터를 추가합니다. data.html 코드는 다음과 같습니다.

  <script type="text/javascript">
    window.name = 'I was there!';  // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
                     // 数据格式可以自定义，如json、字符串
  </script>

애플리케이션 페이지(a.com/app.html)에서 iframe의 onload 이벤트를 수신합니다. 이 이벤트에서는 이 iframe의 src가 로컬 도메인의 프록시 파일(프록시 파일 및 신청 페이지는 동일한 도메인에 있으므로 서로 소통할 수 있습니다.) app.html의 코드 일부는 다음과 같습니다.

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
      if (state === 1) {
        var data = iframe.contentWindow.name;  // 读取数据
        alert(data);  //弹出'I was there!'
      } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://a.com/proxy.html";  // 设置的代理文件
      } 
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', loadfn);
    } else {
      iframe.onload = loadfn;
    }
    document.body.appendChild(iframe);
  </script>

데이터를 얻은 후 iframe을 삭제하고 메모리를 해제하면 보안도 보장됩니다(다른 도메인 프레임 js에서는 액세스하지 않음).

<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
  </script>

요약하자면 iframe의 src 속성은 외부 도메인에서 로컬 도메인으로 전송되고, 크로스 도메인 데이터는 iframe의 window.name에 의해 외부 도메인에서 로컬 도메인으로 전송됩니다. 이는 브라우저의 도메인 간 액세스 제한을 교묘하게 우회하는 동시에 안전한 작업입니다.