JS クロスドメイン XML - AS URLLoader を使用

JS クロスドメイン XML - AS URLLoader を使用
最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、XML 形式でのみ提供できます。残念ながら、私自身のスキルは限られており、JS で理想的なソリューションを思いつくことができませんでした。AS エンジニアに助けを求めなければなりませんでした。約 2 日間の共同デバッグの後、ようやくさまざまなブラウザーでのクロスドメイン アクセスを解決しました。
デモ版のコードは下記に記載されています。
親ページの HTML:

コードをコピー
コードは次のとおりです。

<iframe id="hiddenIframe" style="width:0px; height:0px0; border:0px none; *width:1px; *height:0px; overflow:hidden;"></iframe>
<button value="データを取得" onclick="getData()"></button>
<!-- display:none; または visibility: hidden; を直接使用しないのはなぜですか? [後で説明: タグ] -->

親ページ JS:

コードをコピー
コードは次のとおりです。

ドキュメント.domain = "xxx.com";
関数 getData(データ) {
if (データ == "" || データ == 未定義 || データ == null) {
sendData("a=1&b=2"); //パラメータの形式は任意で、getリクエストを行うときに送信したパラメータと同じです。
}
それ以外 {
アラート("取得したデータ: " + データ)
} }
関数sendData(パラメータ) {
var childWindow = document.getElementById('testIframe').contentWindow;
childWindow.sendData(param); // 駆動関数、隠しドメインのメソッドを駆動して AS の API メソッドを呼び出して XML を取得します
}
関数変更() {
document.getElementById("testIframe").src = "xx.html"; // 隠しドメイン URL
}

サブページ JS:

コードをコピー
コードは次のとおりです。

ドキュメント.domain = "xxx.com";
関数sendData(paramFromParent) {
var serverUrl = 'xxx.com';
//ここで、paramFromParent が処理されて xxx.xml の完全な URL が取得されます
//次に、AS の URLLoader メソッドを呼び出して URL の下のデータを取得します。
// 取得が成功したら、次のメソッドを呼び出して親ページの getData メソッドを駆動します。
}
関数 getData(backData) {
ウィンドウの親からデータを取得します(backData);
}

タグ: display または visibility が使用されない理由は、IE ブラウザでは、iframe 要素がこれら 2 つのポイントとしてスタイル設定されている場合、フレーム内の JS が読み込まれず、通信が実行できないためです...
簡単に理解するには、上の写真を見れば明らかです

プログラムの流れ:
1. JSをロードし、親ページウィンドウの下にsendDataメソッドとgetDataメソッドを宣言します。
2. iframeを読み込む
3. iframe内でASコードを実行する
4. ASクロスドメイン取得XMLファイルの解析と処理
5. window.parent.getDataを呼び出して親ページのJSを駆動し、解析されたデータを渡す

<<:  type="file" の入力ボックスのスタイル変更の概要

>>:  CSSはインラインブロックのずれの問題を解決します

推薦する

Linux 環境の Apache サーバーでセカンダリドメイン名を設定する方法の詳細な説明

この記事では、Linux 環境の Apache サーバーでセカンダリ ドメイン名を構成する方法につい...

MySQL ビューの原則と使用例の概要

この記事では、MySQL ビューの原理と使用法についてまとめます。ご参考までに、詳細は以下の通りです...

タグ li はブロックレベル要素ですか?

なぜ高さを設定できるのでしょうか。<h1 /> などの要素とは異なり、「セミインライン」...

W3C 検証に合格するにはどうすればいいですか?

W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...

CentOS8 で Docker を使用してオープンソース プロジェクト Tcloud をデプロイするチュートリアル

1. Dockerをインストールする1. 仮想マシンに Centos7 をインストールしました。Li...

CSS マージンの折りたたみの詳細な説明

前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...

Dockerを使用してブログサイトを素早く構築する方法の詳細な説明

目次1. 準備2. 展開プロセス3. アクセステストHalo は、ブログに慣れている学生に追加のオプ...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

JavaScript の条件付きアクセス属性と矢印関数の紹介

目次1. 条件付きアクセス属性2. アロー関数の紹介1. 条件付きアクセス属性?. は ES2020...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

Vueカスタムv-has命令、ボタン権限判定の手順

目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...

Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

目次概要プロパティ設定処理ロジック概要具体的な需要シナリオは次のとおりです。 Excel ファイルを...