【緊急】iframeの高さ自動取得・調整

Question

お世話になっております。
過去ログを見て、試してみたのですが、
同じような症状が出ていて、
高さが短くなってしまいます。

助けてください＞＜

ためそうとしている商品ページ
https://item.rakuten.co.jp/24universe/24u_1812168/

ちなみに私はiPhone利用者ですが、
iPhoneではきれいに表示できました＞＜

ゴールドで作成している埋め込まれるURLに下記を


呼び出す方のRMSのスマホ商品ページ共通設定に

jQuery(function($){ $('#itemIFrame, #sp_coIFrame, ').iFrameResize(); }); 


スマホ商品説明文に







それぞれURLを変更して挿入してみました。
スクロールはしなくなったのですが、読み込みのフレームが途中で切れてしまいました。
どこか、heightの指定が必要になるのでしょうか？
お手数をおかけしますがご回答をお願い致します。###HR######IMG0ff37e4eaf0b046c0e12e584b40c270ae.jpegIMG0###

Accepted Answer

ECマスターズの田中です。

> jQuery(function($){ $('#itemIFrame, #sp_coIFrame, ').iFrameResize(); }); 

上記の行に含まれる、自動調整の対象を選択する記述の
#itemIFrame, #sp_coIFrame, 
にて、末尾の「,」の後に何も記載されていないため、
指定自体が文法エラーを起こして動作が停止しております。

末尾の, を削って、
jQuery(function($){ $('#itemIFrame, #sp_coIFrame').iFrameResize(); }); 
に修正していただきますようお願いします。

なお、いただいたソースには
name="itemIFrame" 
name="sp_coIFrame"
という記述がございますが、
id="itemIFrame" 
id="sp_coIFrame"
が正しい記述となります。
ショップには正しく記載されているため、修正の必要はございません。

Answer

おはようございます。
ページを修正させて頂き、表示されたと思います！
ありがとうございました！

ただ、アンドロイドのユーザーにおいて、
白く表示されてしまい、
iframeの中身が表示されない状態になっているようです。

なぜでしょうか＞＜

Answer

ECマスターズの田中です。

弊社所有のAndroid機上のChromeにて確認したところ、
商品画像直上のiframeについては、
添付画像の通り、問題なく表示されておりました。

白く表示されてしまうAndroid機では、
改めてページを読み込み直しても、やはり白く表示されてしまいますでしょうか。
その場合は、該当機種の型番、Androidのバージョン、ご利用中のブラウザ（Chrome、標準ブラウザなど）
といった、詳しい状況をお知らせいただきますようお願いします。###HR######IMG0f2f5b0ba75cae45098307fb2deda4715.pngIMG0######BR###

Answer

下記の通りとのことです。

Galaxy Note8
モデル番号SCV37
アンドロイドバージョン8.0.0
ブラウザGoogleChrome

アプリでも同様に見えないそうです＞＜

よろしくお願いいたします。

Answer

画像で見ると以下のように表示されているようです。###HR######IMG03fe1faf73c41755c6774c2a070fce7bd.jpegIMG0######BR###

Answer

ECマスターズの田中です。

状況をお知らせいただきありがとうございます。
どの部分に原因があるのか、確認を行わせていただきますので
今しばらくお待ちいただきますようお願いします。

Answer

ありがとうございます＞＜

お手数ですがよろしくお願いいたします。

Answer

ECマスターズの田中です。

確認を進めているのですが、
未だ明確な原因が判明しておりません。

原因究明のため、
Galaxy Note8をお持ちの方に、
他のショップでiframeが表示されているかどうか
ご確認いただくことはできますでしょうか。

たとえば、
https://item.rakuten.co.jp/himaraya/0000508697set/
上記商品ページのフローティングヘッダーなどで
ご確認いただきますようお願いします。

Answer

お世話になります。

下記のように表示されたとのことでした。
動作的には正常のように感じます。###HR######IMG0ca2954bedd5fa61dd3303464c6019168.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> 下記のように表示されたとのことでした。
ご確認いただき、ありがとうございました。

2019/02/20 10:19 にいただいたスクリーンショットは
楽天アプリ内での表示ですが、
弊社Android機にて、楽天アプリで商品ページを閲覧した際に
商品説明内のiframeが表示されないことを確認いたしました。

楽天アプリは、通常のブラウザと表示の仕組みが違うことと、
ブラウザと違って開発者ツールなどで分析する方法がないことから、
原則として楽天アプリ内でiframeの内容は表示されない、
とお含みおきいただきますようお願いします。
（iOSの楽天アプリでは一部のiframeが表示されております）

楽天アプリではこのような状況になっておりますが、
Chromeなどのブラウザでも同様に表示されておりませんでしょうか。

すでにご確認いただいているとは思いますが、改めて確認のため、
楽天アプリを使わずに、
Chromeや、他にお持ちのブラウザ（「ブラウザ」など）にて
https://item.rakuten.co.jp/24universe/24u_1812168/
をご覧いただき、
「商品説明」の部分のスクリーンショットを
撮影・共有していただきますようお願いいたします。

Answer

おはようございます。

アプリでは表示されなかったようですが、
クロームでは正常表示されたようです。

多くの画像を表示させたい場合、
縦長の複数画像を作り、ゴールドにアップし、
作る方法が一番なのでしょうか？

Answer

ECマスターズの田中です。

> アプリでは表示されなかったようですが、
> クロームでは正常表示されたようです。

Chromeでの表示をご確認いただけて何よりです。

実際にお試しいただいたとおり、
インラインフレームは、その動作の特徴から、
特定の環境で表示されない、高さの調整が必要になる、など、
どうしても扱いづらくなってしまいますので、

画像を表示させる目的であれば、
インラインフレームを使わず、タグでご設置いただくことを
オススメします。

> 多くの画像を表示させたい場合、
> 縦長の複数画像を作り、ゴールドにアップし、
> 作る方法が一番なのでしょうか？

その方法もございますが、
たとえば、PC用販売説明文の画像をそのまま流用したいなど、
画像枚数の制限以上に設置する必要がある場合は、

タグを設置される際と同様に、タグに対して

Answer

ありがとうございます！

そんな方法があったのですね＞＜
勉強になります！

そちらを実践してみます＾＾