• 文字サイズ


解決済

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

  • 相談者:非公開
  • 2019/10/07 15:48
楽天スマホ商品ページ(アプリ)におけるiframeの高さ自動調整について
参考投稿をもとにソースを記述しました。

iframeを3か所挿入していますが高さの自動調整されているようです。
該当商品ページ
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

ただ
1. アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。(iphone6sアプリで確認)
アプリは非対応なのでしょうか?

2. カテゴリページでも対応させたいのですが、どのような記述をすればよいでしょうか?
<!--iframe高さ自動(商品説明文用)-->
<script ="" src="https//www.rakuten.ne.jp/gold/SHOP-URL/js/iframeResizer.js"></script ="">
<script =""> jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); </script ="">
<!--iframe高さ自動(商品説明文用)-->

この記述だとはじかれてしまうため。
2点ご確認お願いいたします。

下記投稿参考にしました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ECマスターズの田辺です。

iframeはiPhoneなどのiOS端末では内容の大きさに
合わせて表示されるのですが、
android端末の場合には高さが自動で取得されませんので
例えば以下のような<iframe>の高さを内容に合わせて自動調整する、
下記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
上記2つのURLを直接開いて、パソコンに「保存」していただいた上で
楽天GOLDにアップロードしていただき、

iframeとして埋め込まれる側のHTMLファイルに

<script src="iframeResizer.contentWindow.min.jsのURL"></script>

を、iframeを呼び出す側のページ(今回の場合は商品ページ共通パーツ設定)に

<script ="" src="iframeResizer.min.jsのURL"></script ="">
<script =""> jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); </script ="">

を、それぞれご記載いただく、といった形になります。
※各jsファイルのURLは、実際のURLに変更してご利用ください。
(2019/3/1 20:56 コード修正・2019/9/19 19:37 ダウンロード方法修正)
キーワード:iframe
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2019/10/07 18:20
ECマスターズの伊藤です。

> 1. アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。(iphone6sアプリで確認)
> ア………(省略)………
  • 返信者:非公開(質問者)
  • 2019/10/08 11:15
>iframeResizerは、アプリでは正常に動作しません。

アプリで動作しない、という点からheight指定で対応しようと思いますが
どうしてもif………(省略)………
  • 返信者:非公開
  • 2019/10/08 17:54
ECマスターズの伊藤です。

> https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/
> こちらのようなページは1………(省略)………
このフォーラムへの質問は終了しました