開発

ハイブリッドアプリで動的にiframeが生成されるスクリプトを実行した場合の注意点

投稿日:

iframeが生成されるスクリプト

JavaScriptにパラーメーターをセットして実行すると、その情報に応じたiframeが作られるWidgetが用意されていることがあります。

これはWEBサイト用に作られていることが多いのですが、以前にハイブリッドアプリ内でも動的に実行して表示させる方法を載せました。

【ハイブリッドアプリ対応】scriptタグを動的に追加して後からJavaScriptを実行させる方法

これだけではまだ問題が発生する可能性があるのでその対策を載せていきます。

画面スクロール時の問題

画面をスクロールさせる際に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側で対応してもらったことがあります。

他部署や外注を使っている場合でもできるだけ連携がとれるよう配慮してもらいたいものです。

-開発
-

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