iframeで設定したページの高さが動的に変化したら、表示元のiframeの高さも変更するようにできますか？

ある事情で、一部のページ（以下ページＢ）だけifarameで表示させています。表示させているページはページＡとします。

このページＡでページＢを表示させる際に、iframeでやってると気づかれないように、
高さはページＢの高さの幅に合わせて変化するようなJavaScriptを組みました。

これで、ファーストビューではスクロールの必要がないiframeの実装はできました。

しかし、このページＢでは、Jqueryを用いて表示・非表示を切り替える動作があるのですが、そこで変化した高さには対応できず、高さが伸びるとスクロールが必要となってしまいます。

ページＢの高さの変化を監視し、スクロール不要のiframeに仕上げることはできますか？

ちなみに、ページＢは配布されたプログラムで、自分では作っていません。
使ったことのないangularjsで組まれているため、そのプログラム一式だけは独立させており、その内容をiframeで表示させるようにしたいのです。
なので、その処理を実装する際は、なるべくページＢ側で修正することは控えたいです。
我儘を言って申し訳ありません。
不可能なら遠慮なくおっしゃってください。

以下は状況再現用のサンプルです。

ページＡ

html
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta charset="UTF-8">
5<title>テストＡ</title>
6</head>
7<body>
8
9<iframe id="test" frameborder="0" src="b.html" width="100%"></iframe>
10
11<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
12<script type="text/javascript">
13$('#test').on('load', function(){
14try {
15	$(this).height(this.contentWindow.document.documentElement.scrollHeight);
16	} catch (e) {}
17}).trigger('load');
18</script> 
19
20</body>
21</html>

ページＢ

html
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta charset="UTF-8">
5<title>テストＢ</title>
6<style type="text/css">
7.hidden{
8	display:none;
9}
10</style>
11</head>
12<body>
13
14あああああああああああああああああああああああああああああ<br>
15あああああああああああああああああああああああああああああ<br>
16あああああああああああああああああああああああああああああ<br>
17あああああああああああああああああああああああああああああ<br>
18あああああああああああああああああああああああああああああ<br>
19あああああああああああああああああああああああああああああ<br>
20<input type="button" class="btn" value="表示">
21<div class="hidden">
22あああああああああああああああああああああああああああああ<br>
23あああああああああああああああああああああああああああああ<br>
24あああああああああああああああああああああああああああああ<br>
25あああああああああああああああああああああああああああああ<br>
26あああああああああああああああああああああああああああああ<br>
27あああああああああああああああああああああああああああああ
28</div>
29
30<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
31<script>
32$(function(){
33	$('.btn').click(function(){
34		$('.hidden').show();
35	});
36});
37</script>
38
39</body>
40</html>

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

回答2件

CORSの制約内でやる必要がありますが、iframe.contentWindow でiframe要素のリンク先の window を参照出来ます。
MutationObserver でDOMを監視し、 window.innerHeight の値が変化したら追従する、という実装はどうでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

Re: sanset さん

投稿2016/10/13 09:54