スマホでiframe高さ調整（iframeの中身が頻繁に変わる場合）

Question

いつもお世話になっています。
過去フォーラム参照したのですが分からなかったため質問させてください。
（https://forum.ec-masters.net/post_view.php?id=5740を見ました）

スマホの各所にiframeを入れてキャンペーンの案内等の時限バナーを設置しています。
event.htmlというファイルを読み込んでいます。

現在は商品画像上と商品共通説明文の一番上に表示させています。

これをスマホトップページと商品説明文にも入れ込みたいのですが、高さ調整がうまくいきません。

商品画像上等は、height="2"を入れることで、何も表示したくないときはほぼ高さ無しで表示でき許容範囲なのですが、
スマホトップページと商品説明文はheight="2"を入れるとiframeResizerのJSよりheightが優先されるようでうまくいきません。
height="2"を入れなければ、空白の部分が100pxほどできてしまい見栄えが悪いです。

他に何か方法はないでしょうか？
ご教授よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

iframeResizer では、heightより優先されるstyle属性で
高さの設定を行いますので、
heightが優先される、というよりは、
正常に動作されていないような印象を受けます。

正確なご案内を行うには、
実際に設置されている様子を確認させていただく必要があるのですが、
まずは、お試しいただきたい内容をご案内させていただきます。

新しく入れ込むのは、変わらずevent.htmlでよろしいでしょうか。
もし他のファイルの場合は、ファイル内で

のように「iframeResizer.contentWindow.min.js」を
読み込む必要がございますので、追記して読み込むようお願いします。

また、ページ内全てのiframeに対してiframeResizerを動作させており、
非対応のiframeにてJavaScriptエラーが発生し、
動作が停止する可能性がございますので、
動作対象の絞り込みを行っていただきますようお願いします。

たとえば、説明文内の
 jQuery(function($){ $('iframe').iFrameResize(); }); 
を
 jQuery(function($){ $('iframe[src$="event.html"]').iFrameResize(); }); 
にご変更いただくことで、
event.htmlに対してのみ、iframeResizerの動作を行うことができます。

最後に、トップページには
上記scriptタグが記載されていないため、
iframeResizer自体が動作していない可能性がございます。
トップページに追記される際は、上記scriptタグを共に追記していただきますようお願いします。

以上踏まえていただいた上で、やはり高さが自動調整されない場合は、
実際にその様子が確認できるURLをお知らせいただきますようお願いします。
フォーラムにてご返信いただきづらい場合は、
元質問右下の「投稿内容について報告する」よりお知らせください。
その他、ご用意いただくことが難しいなどございましたら、
返信にてお知らせいただきますようお願いします。

Answer

田中様

いつもお世話になっております。

●トップページについて

>上記scriptタグが記載されていないため、
>iframeResizer自体が動作していない可能性がございます。
>トップページに追記される際は、上記scriptタグを共に追記していただきますようお願いします。

ご指摘のとおり、scriptを入れ忘れておりました。初歩的なミス失礼しました。
現在は正常に作動していると思います。ありがとうございます。

●動作対象の絞り込みについて

こちら、ご記載いただいた
 jQuery(function($){ $('iframe[src$="event.html"]').iFrameResize(); }); 
このままでよいでしょうか？
URL部分、https〜でなくて大丈夫ですか？

●アプリ商品ページのevent.htmlについて

現在、商品管理番号4901011613035の商品にのみ、商品説明文上部にevent.htmlを入れています。
スマホブラウザで見ると問題なく表示されているようですが、
アプリになるとheightが優先されているように思います。
こちら解決策ございませんでしょうか？

以上、引き続きよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> ●トップページについて

無事ご対応できたとのことで、ご報告ありがとうございました。

> ●動作対象の絞り込みについて

URLは、基本的には、https~であっても、ご指定頂いた方法でも、
ファイルの読み出しができていれば問題ございません。

しかしながら、

> ●アプリ商品ページのevent.htmlについて

にて、ご報告頂いております通り、
iPhone6plusのアプリにて確認したところ
高さをきちんと認識できていないようです。

トップページでは、高さを取得できていることから
アプリの商品ページは、トップと異なる動作となっているようです。

 jQuery(function($){ $('iframe[src$="event.html"]').iFrameResize(); }); 
のURLをhttps~始まるものに書き換えをし、ご確認いただけますでしょうか。

Answer

伊藤様

お世話になっています。

＞ jQuery(function($){ $('iframe[src$="event.html"]').iFrameResize(); }); 
＞のURLをhttps~始まるものに書き換えをし、ご確認いただけますでしょうか。

こちら試しましたがダメでした。
念のため、商品説明文にscriptの記載をしてみましたが、それでもダメでした。

他に思い当たるところはないでしょうか？

Answer

ECマスターズの伊藤です。

> こちら試しましたがダメでした。
> 念のため、商品説明文にscriptの記載をしてみましたが、それでもダメでした。

ご確認いただきまして、ありがとうございます。
上記をお試し頂いてもご対応できないようですので
アプリの仕様上、難しいのかもしれません。

IFRAME　に直接height="158"を記載して、
アプリで表示されるかご確認いただくことはできますでしょうか。

Answer

ECマスターズの伊藤です。

度々のご案内となってしまい、申し訳ありません。

> 念のため、商品説明文にscriptの記載をしてみましたが、それでもダメでした。

こちらを確認させていただきたいので
対応頂いた商品の、商品管理番号を教えていただくことはできますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

伊藤様

お世話になっています。

＞こちらを確認させていただきたいので
＞対応頂いた商品の、商品管理番号を教えていただくことはできますでしょうか。

商品番号10000142に設定しました。
他の商品は、height指定なしでやっています。

heightなしだと、iframeの内容が多い（高さが高い）場合は問題なく表示されるのですが、
少ないor無い場合に余計な空欄ができてしまうため、height="2"等設定しておき、
余白が表示されないようにしたく考えています。

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

商品管理番号のご連絡ありがとうございました。

確認させていただいたところ、アプリの商品詳細ページでも
iFrameResize自体は問題なく読み込んでいますが
実行できない仕様となっているようです。

回避方法としまして、先にご案内しておりました
IFRAMEに、height="158"といったように
高さを指定していただくようになります。

上記で高さを指定頂いても
iframeResizerが効くブラウザなどでは、
自動調整された高さが適用されるようになります。

ご案内が二転三転してしまい申し訳ございませんが
heightのご指定をお願いいたします。

Answer

伊藤様

＞回避方法としまして、先にご案内しておりました
＞IFRAMEに、height="158"といったように
＞高さを指定していただくようになります。

こちらを設定すると、iframe内がheight="50"で足りる場合、108の余白ができてしまうと思うのですがどうでしょうか？
event.htmlは楽天のキャンペーンごとに内容を頻繁に変更するので、
したいことととしては、event.htmlの内容だけ変えれば、その他の部分は変更しなくても良い、という状態にしたいのです。
アプリ対応はできない、ということでしょうか…。

Answer

ECマスターズの伊藤です。

> アプリ対応はできない、ということでしょうか…。

そうですね、現状アプリでJSが動かないようですので、
申し訳ありませんが、自動的に高さを取得することができません。

本来であれば、スマホもJSが利用できないところを
バグを利用して使用できるようにしているので
楽天に要望をするのも難しと思われます。

Answer

伊藤様

承知しました。
商品説明文部分は他の方法を考えます。
最後まで丁寧にありがとうございました。

Answer

ECマスターズの伊藤です。

> 商品説明文部分は他の方法を考えます。

お力になれず申し訳ありませんが、どうぞよろしくお願いいたいます。

こういった方法で対応はできないか、などございましたら
ご相談くださいませ。