楽天のスマートフォン商品ページのカスタマイズで行き詰っています。
親ページで子ページ(別サーバー上のiframe)を読み込んでいます。
実装したい内容としましては、親ページにボタンを設置して、そのボタンをクリックで子ページの要素(<div id="hoge"></div>)まで上からスクロールさせたいと考えいます。
ボタンはposition: fixed;で画面に追従するよう設置したいと考えています。
iframeはスクロールバーなどはでない状態で、現状は下記の高さを自動調節する記述を入れています。
(普通の1枚ページのように下部へスクロールさせたいと考えています)
■親ページ
script <script type="text/javascript"> window.addEventListener('message', function(e) { var iframe = jQuery("#fugapage"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case 'setHeight': iframe.height(data); break; } }, false); </script> <iframe id="fugapage" src="iframeのURL"></iframe>
■子ページ
<script type="text/javascript"> window.onload = function() { var height = document.getElementsByTagName("body")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); } </script>
何かいい方法はあるのでしょうか?
子ページで指定要素の高さを取得して、それを親ページへ渡す方法がいいのでしょうか、、
JS初心者なので行き詰まっております。
よろしくお願い致します。
参考ソースを実装しました
PCでは動作しますが、現状スマートフォン(iPhone Safari)にて、実装できておりません。
■親ページ
html <div id="button"></div> css #button { position: fixed ; bottom: 310px ; right: -1px ; width: 44px ; height: 35px ; padding: 2px 0; z-index: 999 ; font-size: 13px ; border-radius: 5px 0 0 5px ; line-height: 1.4 ; color: #fff ; background: #cc0000 ; text-align: center ; } <script type="text/javascript"> jQuery(window).load(function(){ jQuery('#button').on('click',function(){ document.getElementById('fugapage').contentWindow.postMessage('hoge', '*'); }); }); </script> <iframe id="fugapage" src="iframeのURL"></iframe>
■子ページ
html <img src="xxx" id="hoge" border="0" alt=""> <script type="text/javascript"> window.addEventListener('message', function(event) { document.getElementById(event.data).scrollIntoView(); }, false); </script>