質問: 楽天スマホ商品ページ(アプリ)におけるiframeの高さ自動調整 楽天スマホ商品ページ(アプリ)におけるiframeの高さ自動調整について参考投稿をもとにソースを記述しました。iframeを3か所挿入していますが高さの自動調整されているようです。該当商品ページhttps://item.rakuten.co.jp/kokage-shop/half-undershirts/ただ1. アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。(iphone6sアプリで確認)アプリは非対応なのでしょうか?2. カテゴリページでも対応させたいのですが、どのような記述をすればよいでしょうか?この記述だとはじかれてしまうため。2点ご確認お願いいたします。下記投稿参考にしました。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーecマスターズの田辺です。iframeはiphoneなどのios端末では内容の大きさに合わせて表示されるのですが、android端末の場合には高さが自動で取得されませんので例えば以下のようなの高さを内容に合わせて自動調整する、下記jqueryプラグインをお試しください。iframe resizerhttp://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ファイルにを、iframeを呼び出す側のページ(今回の場合は商品ページ共通パーツ設定)にを、それぞれご記載いただく、といった形になります。※各jsファイルのurlは、実際のurlに変更してご利用ください。(2019/3/1 20:56 コード修正・2019/9/19 19:37 ダウンロード方法修正)
回答: ecマスターズの伊藤です。> 1. アプリの方で確認すると1つ目のiframe以下が真っ白になってしまいます。(iphone6sアプリで確認)> アプリは非対応なのでしょうか?今の所、iframe、iframeresizeをご使用することで非表示になるというご報告は頂いておりません。ページのソースを拝見したところタグ名や属性と=""の間に、半角スペースがない箇所がございましたので、ご確認をお願いいたします。 → 上記以外にもございますので、ご確認いただき、修正をお願いいたします。また、iframeresizerは、アプリでは正常に動作しません。そのため、iframeのheightにて、必要な高さを入力していただきますよう、お願いいたします。> 2. カテゴリページでも対応させたいのですが、どのような記述をすればよいでしょうか?ご登録はどちらにされていますでしょうか。頂いたコードを店舗設定 > デザイン設定 > スマートフォン デザイン設定 > カテゴリページ共通パーツ設定・カテゴリページ共通説明文に登録したところ、エラーなく登録することができました。