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はインラインブロックのずれの問題を解決します

推薦する

Ubuntu 18仮想マシンのクローン作成後に同じIPアドレスになる問題の解決方法

序文最近、仮想マシンを使用して Ubuntu 18.04 をインストールしました。クローン作成後、I...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

Tomcat maxPostSize設定実装プロセス分析

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

Axios の二次カプセル化の例 プロジェクトのデモ

1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...

CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)

不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...

MySql5.x を MySql8.x にアップグレードする方法と手順

MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...

複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。

目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...

Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル

インストール環境の説明•システムバージョン: windows10 •MySQL バージョン: mys...

図を使ってWeb2.0とは何かを説明する

最近はWeb2.0という言葉をよく耳にしますが、Web2.0とは何でしょうか? Web 1.0 とど...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

Vue スキャフォールディングでのレンダリングを理解する

Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...

MySQLユーザー削除バグを解決する

著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...