JavaScriptにパラーメーターをセットして実行すると、その情報に応じたiframeが作られるWidgetが用意されていることがあります。
これはWEBサイト用に作られていることが多いのですが、以前にハイブリッドアプリ内でも動的に実行して表示させる方法を載せました。
これだけではまだ問題が発生する可能性があるのでその対策を載せていきます。
画面スクロール時の問題
画面をスクロールさせる際にiframeの上をスワイプすると、iframe内を動かそうとして画面全体がスクロールしない場合があります。
iframeの高さが足りず、iframe内にスクロールバーが出ている場合はこのような動作になってしまうのは仕方のないところですが、高さが足りている時には画面全体がスクロールするのが自然です。
Ionic v1系ではion-contentの外に出すか、ion-contentにoverflow-scroll="true"を記述することでこのような状態を回避することができます。
<ion-content overflow-scroll="true">
iframeの高さが取得できない
このタイプのWidgetはスクリプトを実行するとiframeが生成されて自動的に高さが設定されるようになっていることが多いです。ところが、Androidだけ高さが取得できないという問題がありました。
これはWidgetの作り方によるかもしれませんが、呼び出す側からではどうすることもできないと思います。
iframeの中の要素を取得しようにもクロスオリジンの問題で何もできないので、情報量が一番多い時に合わせて高さを固定してしまうという方法しかありません。
iframeの情報量が少ない場合には下部にスペースが空いてしまいますが、ここは我慢してもらいましょう。
スマートフォンで高さを設定する場合には下記のように横の解像度を考慮する必要があります。
※コントローラー側のiframeHeightはiframeが入る枠を、ディレクティブ側のiframeHeightはiframe自体の枠を設定しています
※画面幅を375pxでコーディングしていてiframeの高さを200pxとした場合
まとめ
WidgetのJavaScriptを制作している担当者や外注と打ち合わせをしてアプリに合わせた修正をして貰えるのが理想的だと思いますが、横の繋がりが薄くて思うようにいかなかったり、対応してもらうのに時間がかかるため、現状で何とかしなければならないということが現場ではありがちです。
一度iframeのsrc属性がhttps:を省略して記述されていたためにアプリ上ではローカルファイルを見にいってしまうという問題がありました。これもsrc属性を変数に保存しておき、一度ブランクをセットした後で頭にhttps:を付けて変数を戻すという方法で対処できたものの、iframeが表示されるまでにラグが発生してしまうのでWidget側で対応してもらったことがあります。
他部署や外注を使っている場合でもできるだけ連携がとれるよう配慮してもらいたいものです。