ifrmae内の高さや幅が可変するiframeの設置

Question

いつもお世話になっております。

楽天スマホ商品ページに固定ヘッダーナビとしてiframeでハンバーガーメニューを設置しようとしましたがiframe内で高さが可変するページはどういう調整をすればいいのかわからない状況です。

サンプルページですがこちらが設置しようとしているページです。
https://www.rakuten.ne.jp/gold/ra-imu/meanMenu-master/demo.html
(480ｐｘ以下で表示されます)

iframeをこのページの高さに合わせて設定すると商品ページが覆われてしまいリンクなどが
クリックできなくなってしまいます。
これを解決する方法などがございましたらご教授いただければ幸いでございます。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

https://forum.ec-masters.net/post_view.php?id=7206
にて紹介している「iframeResizer」を導入して、
高さを自動調整する、という方法もございますが、

メニューの機敏な伸縮が発生する中で、
複雑な構造によって不具合が発生する可能性は
多少高くなるかと思いますので、

iframeを使わず、
ハンバーガーメニューをスマートフォン用ページに
直接設置していただく方法をオススメします。

HTMLタグによる文字数制限が懸念される場合は、
外部JavaScriptファイルの中で、HTMLタグをページに追加する仕組みを
ご検討ください。

Answer

田中様

＞メニューの機敏な伸縮が発生する中で、
＞複雑な構造によって不具合が発生する可能性は
＞多少高くなるかと思いますので、

＞iframeを使わず、
＞ハンバーガーメニューをスマートフォン用ページに
＞直接設置していただく方法をオススメします。
ありがとうございます。そちらを検討したいと思います。

＞HTMLタグによる文字数制限が懸念される場合は、
＞外部JavaScriptファイルの中で、HTMLタグをページに追加する仕組みを
＞ご検討ください。
よろしければこちらについての詳細を教えていただけないでしょうか？

お手数をおかけしますがよろしくお願いいたします。

Answer

ECマスターズの田中です。

> よろしければこちらについての詳細を教えていただけないでしょうか？

たとえば、HTMLタグとして、
一番外側にあるタグにID属性を付けた

だけを書いておき、

document.getElementById('hbgmenu').innerHTML = '追記するHTMLソース';

のように、タグの中身のHTMLを指定する形で追記することができます。
この場合、追記するHTMLソースの中に改行が含まれるとエラーになるので、
基本的には1行にまとめてご記載いただきたいのですが、
どうしても改行を含める必要がある場合は、

document.getElementById('hbgmenu').innerHTML = '1行目'  
'2行目'  
'3行目'  
（中略）
'最終行';

のように、1行ごとに ' と '  で囲んでいただいたり、

document.getElementById('hbgmenu').innerHTML = '1行目\
2行目\
3行目\
（中略）
最終行';

のように、行末に\を記載する（つまり、改行文字をエスケープする）といった
工夫が必要となります。

Answer

詳細を教えてくださりありがとうございます。
ですが私にはまだ早いようでうまくいきそうありませんのでiframeResizerを一時的にですが使用することに致しました。

innerHTMLを使う方法は後日挑戦したいと思います。

そこでhttps://forum.ec-masters.net/post_view.php?id=7206を参考にして、
試させていただいたのですが、iframeが途中で途切れてしまいどうもうまくいきません。
原因を探って見ましたがこちらでは見当も付かないのですがこれは可変するハンバーガーメニューだから起こる現象なのかそれともこちらのやり方が間違っているからなっているものなのでしょうか？

iframeで表示したいURL↓
https://www.rakuten.ne.jp/gold/ra-imu/meanMenu-master/demo.html

これを表示したいのは楽天スマホ共通商品ページです。

よろしくお願いいたします。###HR######IMG0b6fc6205fd4f3b46d91bdfee2c29783a.jpegIMG0######BR###

Answer

ECマスターズの塚本です。

いただいた本投稿のご質問ですが、
本日技術系の担当者が休みをとっておりますので、
改めて明日回答させていただきます。

お急ぎのところお時間いただきますが、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

原因として、
・ハンバーガーメニューがfloatしているため、demo.html自体の高さが変わらない
・iframeResizer が正しく動作していない
・iframeResizer は動作しているが、高さの変化に対応できていない
以上３つのパターンが考えられます。

まず、最初のパターンに対応するため、
下記スタイルシートを、demo.htmlに適用させてください。

body:after{
    content: "";
    clear: both;
    display: block;
}

２つ目のパターンを検討するには、
実際に設置されている様子を確認させていただく必要がございます。

共通説明文ではなく、商品のスマートフォン用商品説明文に含まれていても、
正しいソースであれば問題なく適用されますので、

既存の商品をコピーしてサーチ非表示に設定したダミー商品などをご用意の上、
スマートフォン用商品説明文に設置していただき、
元質問右下の「投稿内容について報告する」リンクより
URLをお知らせいただきますようお願いいたします。

Answer

田中様
お世話になります。

＞まず、最初のパターンに対応するため、
＞下記スタイルシートを、demo.htmlに適用させてください。
適用させてみましたがうまくいきませんでした。

＞既存の商品をコピーしてサーチ非表示に設定したダミー商品などをご用意の上、
＞スマートフォン用商品説明文に設置していただき、
＞元質問右下の「投稿内容について報告する」リンクより
＞URLをお知らせいただきますようお願いいたします。
ありがとうございます。そのようにさせて頂きます。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

demo.htmlにて読み込もうとされている
iframeResizer.contentWindow.min.js のURLが
「https://item.rakuten.co.jp」で始まっておりましたので、
「https://www.rakuten.ne.jp/gold」に置き換えて、
正しい iframeResizer.contentWindow.min.js のURLに修正していただきますようお願いします。

Answer

そんな初歩的なミスに気付かず田中様のお手を煩わせてしまい申し訳ありませんでした。
ご多忙のところお手間を取らせてしまったところ大変恐縮にございます。

修正したところ無事表示できました。
ありがとうございました。