クロスドメイン・モディフィケーション iframeページのコンテンツ詳細

プリンシプル

マスターサイトはプロキシページを埋め込み、プロキシページにデータを渡し、プロキシページはマスターサイトのデータを元にターゲットページのDOMを操作する。プロキシページはターゲットページと同じドメインにあるので、プロキシページはターゲットページのドキュメントオブジェクトを取得し、操作することができます。

前提条件

proxy.htmlは、インラインiframeページと同じドメインで提供され、アクセス可能であることが必要です。

使用する

postMessageとURLパラメータを使用した2種類の呼び出しに対応しています。

ポストメッセージ

このメソッドでは、JSON.stringifyを使用してオブジェクトを文字列に変換する必要があります。

EventBus eventBus = new EventBus();

class EventBusBean{
  String startDate;
  String endDate;

  EventBusBean({this.startDate, this.endDate});
}

URL パラメータ

このメソッドは、渡されたコンテンツをencodeURIComponentでエンコードする必要があります。

eventBus.fire(EventBusBean(startDate: _startDate, endDate: _endDate));

API

 StreamSubscription _busSubscription ;
  @override
  void initState() {
    super.initState();
    _busSubscription = eventBus.on<EventBusBean>().listen((event) {
     debugPrint('${event.startDate}=>${event.endDate}');
    });
  }

注意：セキュリティ上の理由から、includeScriptとimportScriptはデフォルトで無効になっています。これを有効にするには、proxy.htmlで変数ENABLED_JS_INCLUDEをtrueに設定してください。

リソース

https://github.com/stephenliu1944/cross-domain-iframe-proxy

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。