• 文字サイズ


解決済

楽天スマホ商品ページ(アプリ)における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
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
今年4月から毎週オンラインにて開催し、これまでに1400社以上が参加された 90分で学べる楽天集客対策セミナーを12月11日(金)に開催します。 初めての参加で満足できるか不安な方には返金保証もお付けしております。 ぜひこの機会にご参加ください。

  • 返信者:非公開
  • 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………(省略)………