ページクリエイターにiframeを差し込む際の高さ調整について

Question

お世話になります。

ページクリエイターにおすすめショーケース等を差し込んで
簡易的にカテゴリページを作成したいと考えているのですが、

PC・スマホ対応の【原田さんのタテからヨコ式はめ込み用テンプレート】に
【おすすめショーケース】を差し込んでiFrameResizerで高さを自動調整をしたいのですが可能でしょうか？

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

失礼しました、
私よりご案内差し上げたソースの中に、
不足している処理があることを確認いたしました。

お手数ですが、改めて
下記scriptタグをご設置いただきますようお願いします。
同じ場所にご設置いただいて結構です。
（前回ご案内差し上げたソースも、私にて修正させていただきました）


document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('iframe').forEach( function(e){
e.addEventListener('load', function () {
var e = this;
e.height = e.contentWindow.document.documentElement.scrollHeight+10;
});
e.height = e.contentWindow.document.documentElement.scrollHeight+10;
});
});

Answer

ECマスターズの田中です。

> PC・スマホ対応の【原田さんのタテからヨコ式はめ込み用テンプレート】に
> 【おすすめショーケース】を差し込んでiFrameResizerで高さを自動調整をしたいのですが可能でしょうか？

はい、可能です。

なお、iFrameResizerを使う場合、埋め込まれるページ（親）・埋め込むページ（子）に
それぞれ外部JSファイルの読み込みが必要となりますが、
今回のケースでは双方ともに楽天GOLDのページとなるため、
親ページ、つまり【原田さんのタテからヨコ式はめ込み用テンプレート】に
scriptタグを一つ追加していただくことでも自動調整可能です。
（9/14 18:24 JavaScriptソースを修正）


document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('iframe').forEach( function(e){
e.addEventListener('load', function () {
var e = this;
e.height = e.contentWindow.document.documentElement.scrollHeight+10;
});
e.height = e.contentWindow.document.documentElement.scrollHeight+10;
});
});


万が一、上記タグをご設置いただいても自動調整されない場合は、
iFrameResizerによる調整もお試しいただければ幸いです。

Answer

ご回答ありがとうございます。

こちら試してみたのですが、うまくいきませんでした。
ちなみにどこに差し込んだらよいか詳しく教えていただけますでしょうか？

また、iFrameResizerも試したのですが、うまくいきませんでした。

最終的に高さが調節できれば良いのですが...

Answer

ECマスターズの田中です。

特に場所の指定などはありません。
ページ内のどこかに記載することで、
ページの読み込みと共に動作する仕組みになっております。
iFrameResizerも同様です。

うまくいかない原因を調査する必要がございますので、
実際に設置をお試しいただいたページのURLを、
「投稿内容について報告する」より
お知らせいただきますようお願いいたします。

Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございます。
無事、ソースを確認いたしました。
対応を検討の上改めてご返信いたしますので、
今しばらくお待ちいただきますようお願いします。