楽天スマホ商品ページ（アプリ）におけるiframeの高さ自動調整

Question

楽天スマホ商品ページ（アプリ）におけるiframeの高さ自動調整について
参考投稿をもとにソースを記述しました。

iframeを3か所挿入していますが高さの自動調整されているようです。
該当商品ページ
https://item.rakuten.co.jp/kokage-shop/half-undershirts/

ただ
1.　アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。（iphone6sアプリで確認）
アプリは非対応なのでしょうか？

2.　カテゴリページでも対応させたいのですが、どのような記述をすればよいでしょうか？


 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 


この記述だとはじかれてしまうため。
2点ご確認お願いいたします。

下記投稿参考にしました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ECマスターズの田辺です。

iframeはiPhoneなどのiOS端末では内容の大きさに
合わせて表示されるのですが、
android端末の場合には高さが自動で取得されませんので
例えば以下のようなの高さを内容に合わせて自動調整する、
下記jQueryプラグインをお試しください。

iFrame Resizer
http://davidjbradshaw.github.io/iframe-resizer/

導入方法ですが、たとえば、

https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.js
https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.contentWindow.min.js
上記２つのURLを直接開いて、パソコンに「保存」していただいた上で
楽天GOLDにアップロードしていただき、

iframeとして埋め込まれる側のHTMLファイルに



を、iframeを呼び出す側のページ（今回の場合は商品ページ共通パーツ設定）に


 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 

を、それぞれご記載いただく、といった形になります。
※各jsファイルのURLは、実際のURLに変更してご利用ください。
（2019/3/1 20:56 コード修正・2019/9/19 19:37 ダウンロード方法修正）

Answer

ECマスターズの伊藤です。

> 1.　アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。（iphone6sアプリで確認）
> アプリは非対応なのでしょうか？

今の所、iframe、iframeResizeをご使用することで
非表示になるというご報告は頂いておりません。

ページのソースを拝見したところ
タグ名や属性と=""の間に、半角スペースがない箇所が
ございましたので、ご確認をお願いいたします。

Answer

＞iframeResizerは、アプリでは正常に動作しません。

アプリで動作しない、という点からheight指定で対応しようと思いますが
どうしてもiframeのwidth指定を100％にするとデバイスによりheightが変わるので
大目に数値を指定するしか対処が分かりません。
https://item.rakuten.co.jp/e-zakkamania/33566-1401336/
こちらのようなページは1ページ、1つのiframeを入れて対応されているのでしょうか？
iframeを複数入れる方法は通常あまりおすすめではありませんか？
ご確認お願いいたします。

Answer

ECマスターズの伊藤です。

> https://item.rakuten.co.jp/e-zakkamania/33566-1401336/
> こちらのようなページは1ページ、1つのiframeを入れて対応されているのでしょうか？

１ページ内に複数のiframeのご利用はされていました。

確認したところ

●iframeは横幅を330pxに固定
https://www.rakuten.ne.jp/gold/e-zakkamania/sp/rms/pointup_banner.html
※iPhone5のような古いデバイスに対応しないようであれば
最小横幅が375pxと考えて頂いて、よろしいかと思います。

●iframeに高さを指定

などでご対応頂いておりました。


> iframeを複数入れる方法は通常あまりおすすめではありませんか？

そうですね、iframeの文字は検索にかからないことや
たくさん使うことで、ページの表示速度が落ちてしまうこと、
また、今回のように、高さの取得ができないなど
多数の問題がございますが
ページの更新の手間削減など、利点もございますので
最小限の使用に押さえていただきたいと思います。