JavaScript クロスドメインの概要: window.name_javascript スキルによって実装されたクロスドメイン データ送信

私自身も試してみましたが、とてもうまくいきました。具体的な実装方法は以下に記録します

3 つのページがあります:

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 によって外部ドメインからローカル ドメインに転送されます。これはブラウザのクロスドメイン アクセス制限を巧みに回避しますが、同時に安全な操作でもあります。