開発

ハイブリッドアプリ内にiframeを表示する際に高さを自動的に調整する方法【クロスドメイン対応】

投稿日:

JavaScript

Ionic v1系を使ったハイブリッドアプリの開発でページ内にiframeを表示したいという要望がありました。

しかもiframeを直接表示するのではなく、JavaScriptを実行することでiframeが生成されるタイプのものです。

試しにアプリ内のテンプレートにスクリプトを入れてみたところ、残念ながら通りまったく表示されません。
※このスクリプトはログインチェックをおこなっているため、アプリ内からはログイン情報が取得できないことが原因という可能性もあります

そこで一旦別のHTMLを用意し、その中でスクリプトを実行し、アプリ側にはそのHTMLを通常のiframeで表示することにしました。

ちょっとややこしく聞こえますけど、簡単に言うと間にHTMLをかませただけです。

これによって無事アプリ内にiframeを表示することに成功しました。

ところが問題が2つほど発生してしまいます。

iframe内のリンク

ひとつはiframe内のリンクをタップすると、アプリ内にページが表示されてしまい、アプリがブラウザ化して挙動がおかしくなってしまうことです。

これは「target="_blank"」を設定していてもダメでテンプレートから内部ブラウザか外部ブラウザを呼び出す処理を入れなくてはなりません。

iframeのスクリプト提供元に問い合わせても各部署で共通で使われているため、すぐには対応できないとのこと。

アプリ側はAngularJSなのでjQueryを使いたくないという事情があるものの、間にかませたHTMLはやりたい放題なのでjQueryを使ってDOM操作をおこなうこともできます。

さっそくjQueryを使ってiframeのaタグを書き換えようと試みましたが、まったく反応がなく、Consoleにも何も出力されません。

どうやらクロスドメインによってはじかれてしまっていることが原因のようです。

そこでiframe内の各リンク先を反映することは諦め、アプリ側ではiframe全体がタップされたら同じ共通トップのようなところに遷移するようにしました。

iframeの高さ取得

iframeを使ったページでよく発生する問題でiframeの高さが変更された場合にページに反映しないというものがあります。

アプリ側から高さを取得しようとすると例によってクロスドメイン問題で上手くいかなかったのでHTML側からアプリに高さを渡すことにしました。

HTMLからiframe内のDOMにはアクセスできませんでしたが、iframe自体の高さを取得することはできます。

その情報をpostMessageを使ってアプリに送り、アプリ側ではDirective内で受け取ってDOMにセットします。

その際、アプリ側では全体にzoomをかけていたため、端末による解像度の違いで下部が切れるといった現象が発生。回避策として幅を一緒に渡して計算しています。

間にかましたHTML

アプリ(テンプレート)
※trustSrcでリソースが信頼できることを宣言しなければなりません
※iframeの基本の高さを50ピクセルにして後から書き換えます

アプリ(ディレクティブ)
※ページ幅の基準を375pxとしているので異なる場合は計算して高さを調整します
※遷移元によってはiframeが読み込まれないことがあったので$stateParams.paramにreloadが入ってきた場合、一度srcをブランクにして再セットしています

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.