iframe内でタブ移動するにはどうすればよいでしょうか。

Question

お世話になっております。

http://www.rakuten.ne.jp/gold/(ドメイン)/skinix/airwalluv_sp_pc.html
のページをiframeで商品ページなどにいれようと思っております。

ですが、iframeで入れると
ある画像をクリックするとページ内でdiv id="xxx"へ移動することができません。

どうにかして移動させることは出来るものなのでしょうか。

どうぞ、よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

文章では伝わりづらい仕組みですので、
サンプルを作成いたしました。

https://seminar.ec-masters.net/ecm/iframetest_outer.html
上記URLをご参照いただき、
ページ全体（iframetest_outer.html）とインラインフレーム内（iframetest_inner.html）の
ソースをそれぞれご確認ください。

アンカーとなる〜は
「iframetest_outer.html」に設置し、
スタイルシートを利用して
「iframetest_inner.html」内のその１〜その５とほぼ同じ位置に移動させております。

この〜に向けて
リンクを張ることで、
iframe内の特定の位置への移動を実現しております。

「iframetest_outer.html」内では単純に
#section1~5に対してリンクを張れば良いのですが、
「iframetest_inner.html」内では
自分のフレーム内ではなく、呼び出し元のページ内のアンカーにリンクさせる必要があります。
「iframetest_inner.html」では、下記JavaScriptを利用して
内にタグを追記することで、その動作を実現させております。



$(function(){
	$('head').append($('').attr('href',document.referrer));
});


※jQueryの外部JSファイル（jquery-3.1.1.min.js）を利用される際は、GOLD内に予め保存してご利用ください。

ご留意いただきたいのですが、
中に「position:absolute;」設定がされた要素しか無いタグは、
（「iframetest_outer.html」で指すところの）
高さがないものとみなされてしまいますので、
スタイルシートで高さを指定していいただきますようお願いします。

Answer

ECマスターズの田中です。

iframeで、内容を全て表示する形で設置されようとしておりますでしょうか。

iframeの中にあるアンカー(#●●●●)へのリンクをクリックした場合、
ページ全体ではなく、iframeの中身を、そのアンカーまでスクロールさせる
という仕様となっております。

試しに、iframeの高さを小さく（1000ピクセルなど）
変更していただいた上で
リンクをクリックしていただきますと、
iframeの内容が、目的のアンカーまで
スクロールすることがお分かりいただけます。

リンクをクリックした際に
ページ全体をスクロールさせるためには、
親フレームに隠れアンカーを設置する、といった
特殊な対応が必要となります。

Answer

ご回答いただきありがとうございます。


>iframeで、内容を全て表示する形で設置されようとしておりますでしょうか。
⇒はい。
　できれば横のスクロールバー無しで表示させてたいと思っております。


>試しに、iframeの高さを小さく（1000ピクセルなど）
⇒1000ピクセルに指定すると、目的のアンカーまで行くことを確認できました。
　ですが、高さを10000ピクセルなど広げると、
　一度ページ最下部分までクリックでスクロールした後は
　それ以降はまったくクリックしてもスクロールしない状態になっているので
　できればこの動きは避けたいと思います。


>ページ全体をスクロールさせるためには、
>親フレームに隠れアンカーを設置する、といった
>特殊な対応が必要となります。
⇒こちらの方法をお教え願えますでしょうか。
　また、参考にできるサイトなどもあれば、教えていただけますと幸いです。


どうぞ、よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞こちらの方法をお教え願えますでしょうか。
スタイルシートで「position:relative;」を設定したタグの中に
「position:absolute;」を設定した、「airwalluv_sp_pc.html」を表示するタグを設置し、
「position:absolute;」と「display:block;」を設定したタグを、
「top:◯◯px;」を利用して、アンカーにしたい位置に配置していただけますでしょうか。

実例や解説ページはないため、まずは設置をお試しいただき、
不明な点がありましたらお知らせください。

Answer

ご回答ありがとうございます。

>「position:relative;」を設定したタグ
　⇒1つ上位にdivでかましました。

>「position:absolute;」を設定した、「airwalluv_sp_pc.html」を表示するタグを設置
　⇒iframeタグの、position:absolute;を設定しました。

>「position:absolute;」と「display:block;」を設定したタグを、
 >「top:◯◯px;」を利用して、アンカーにしたい位置に配置していただけますでしょうか。
　⇒こちらの理解が追いつきません。。。
　　cssのaタグに、「position:absolute;」と「display:block;」を設定しました。
　　「top:◯◯px;」を、同じcssのaの設定内に入れる、とはどういうことでしょうか。


　　○html内
　　
　　　　　・・・
　　

　　○css内
　　a.tokucho_link{
　　　　　　　position:absolute;
　　　　　　　display:block;
　　　　　　　top:1280px;
　　}


　としましたが、A.jpgの画像が表示されず、どうしたものか分かりません。

　すみませんが、ご教示お願いいたします。

Answer

サンプルページまで作っていただきありがとうございました。

ページ全体（iframetest_outer.html）とインラインフレーム内（iframetest_inner.html）に
該当するページは作り、
アンカーの移動も確認できました。

こちらのページです。
http://www.rakuten.ne.jp/gold/(ドメイン)/skinix/airwalluv_sp_pc_iframe.html


ですが、ページ全体（iframetest_outer.html）の内容を、RMSのカテゴリ説明文上、カテゴリ説明文下に
コピペすると、
うまくアンカーに移動しません。

たとえば、
http://www.rakuten.ne.jp/gold/(ドメイン)/skinix/#tokucho
のようにurlがなってしまい、htmlに正しく飛びません。


たびたびすみませんが、
RMSのカテゴリ説明文上、もしくは下に
ページ全体（iframetest_outer.html）の内容を登録して
うまくアンカーに移動するには
どうすればよいか教えてください。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

私にて、自分のPC内だけで埋め込んでテストしたところ
問題なく動作いたしましたので、
原因を調べるためには、
実際に埋め込まれている様子を確認させていただく必要があります。

お手数ですが、ダミーでも結構ですので、
カテゴリ説明文にページ全体（iframetest_outer.html）の内容を
ご登録いただいたカテゴリをご用意いただき、
URLの末尾（http://item.rakuten.co.jp/ショップURL/c/◯◯◯◯/ の◯の部分）を
ご返信いただけますでしょうか。
フォーラムで回答しづらい場合は、リクエストフォームよりお寄せください。

Answer

ご確認ありがとうございます。

カテゴリを非表示の状態から表示に変更するとできました！

年末のお忙しいところ、ご丁寧にご対応いただきありがとうございました。
来年もどうぞ、よろしくお願いいたします。