楽天スマホ商品ページ(アプリ)における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.jshttps://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 ダウンロード方法修正)