postmassageで子から親へ複数の値を渡す

親の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>

よろしくお願い致します。

m.ts10806

2018/04/26 06:35

親子両方のhtmlを提示願います。

ysfree14

2018/04/26 09:20

html追記いたしました、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ただの決めの問題なので、[ '機能名', データ ] という配列を渡すと決めているのなら、それに統一すればいいのではないでしょうか？

親

JavaScript
1window.parent.postMessage(['scroll', scroll], "*");

子

JavaScript
1        switch(eventName) {
2            case 'setHeight':
3                iframe.height(data);
4                break;
5            case 'scroll':
6                // 処理
7
8                break;
9        }