スマホ商品ページ共通説明文におけるiframeの高さ自動調整

Question

お世話になっております。

デザインレシピを参考にスマホ商品ページのファーストビューにバナーを設置しているのですが、同時に設定したiFrame Resizerが上手く動作しません。
それぞれ以下のように記述しています。

iframeで読み込むページ


商品ページ共通説明文


 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 



お手数おかけしますが、解決策をご教示くださいますようお願いいたします。

Accepted Answer

ECマスターズの田中です。

２点、ご確認いただきますようお願いします。

・１点目
いたただいたソースの３行目に含まれる
#itemDescription iframe, #shopCommonText iframe
は、iFrame Resizerを適用する対象を選ぶ部分となっております。

無差別に適用させると、楽天市場本来のiframeに反応してエラーを起こし、
全体の動作が止まりますので、
スマートフォン商品説明文と商品ページ共通説明文の中にあるiframeタグ、
という指示を行っているのですが、

iframeBeforeの仕組みで商品画像上に移動したiframeは
上記の指定から外れてしまうため、iFrame Resizerの対象外となってしまいます。

この部分を、
.iframeBefore
にご変更いただき、商品画像上のiframeタグを正しくご指定いただきますよう
お願いたします。
スマートフォン商品説明文と商品ページ共通説明文の中にある
他のiframeタグにも適用させたい場合は、
#itemDescription iframe, #shopCommonText iframe, .iframeBefore
のように、カンマ区切りで追記していただければ結構です。

・２点目
「iframeResizer.contentWindow.min.js」「iframeResizer.min.js」
各JSファイルの内容が、正しくありませんでしたので、

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に上書きアップロードしていただきますようお願いします。

もし、過去のフォーラムの手順に従って
JSファイルをご用意いただいておりましたら、
ご参照いただいた手順が記載されているURLをお知らせいただけますでしょうか。
正しく伝わるよう、修正を検討させていただきます。

Answer

田中様

早速ご回答いただきありがとうございました。
ご指摘いただいた部分を修正したところ、正常に動作するようになりました。ありがとうございます。

jsファイルの取得やタグなどは、下記などいくつかの投稿を参考にさせていただきました。
https://forum.ec-masters.net/post_view.php?id=5740
https://forum.ec-masters.net/post_view.php?id=7137
https://forum.ec-masters.net/post_view.php?id=7206

上記ではいずれもjsファイルの指定が

となっていたため、その部分を今回貼っていただいた「iframeResizer.js」に直した形です。

Answer

ECマスターズの田中です。

無事動作して、何よりです。

> jsファイルの取得やタグなどは、下記などいくつかの投稿を参考にさせていただきました。

お知らせいただき、ありがとうございます。
今後の案内の参考にさせていただきます。