親のhtmlで別サーバーのiframeを読み込ませています。
子から親へ複数の値を渡して、親でそれぞれ別に取り出すことはできるのでしょうか?
現状iframeの高さを取得して親側で自動調整しているのですが、別でiframe内の上部からhogeまでの数値を取得して親に渡したいと考えています。
親側にどのように記載すればいいのか分からない状況です。
■子
html <p id="hoge"><img src="" alt=""></p> JS <script> window.onload = function() { //高さを取得 var height = document.getElementsByTagName("body")[0].scrollHeight; window.parent.postMessage(["setHeight", height], "*"); //ページ上からhogeまでの距離を取得 var clientRect = document.getElementById("hoge").getBoundingClientRect() ; var scroll = clientRect.top ; window.parent.postMessage(['scroll', scroll], "*"); } </script>
■親
html <div id="fugapage"> <iframe src="iframeのソース" frameborder="0" width="100%" height="100%" id="fugapage-frame"></iframe> </div> <div id="button"></div> JS <script> var src = jQuery("#fugapage-frame").attr("src"); jQuery("#fugapage-frame").attr("src",""); jQuery("#fugapage-frame").attr("src",src); 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; case 'scroll': jQuery('#button').on('click',function(){ var scrollHeight = e.data[1]; var frameoff = jQuery('#fugapage').offset(); var _frameoff = frameoff.top; var total = _frameoff + scrollHeight; jQuery("html,body").animate({scrollTop:total - 120}); }); } }, false); </script>
よろしくお願い致します。