違うドメイン同士（クロスドメイン）でjqueryを使ってiframeの高さを自動取得する
タイトルのまんまです。
こうなった経緯
あるサイト内でカスタマイズしたメールフォームを設置したいけれど、phpを使わせてくれないのでどうしたものかと悩んだ時に違うドメインからiframeで読み込むことを思いつきました。
iframeは使うけれど、できるだけ同じページのような状況（まるで外部ページを読み込んでいるとは思えないような）を再現したかったので、確認画面やエラー画面で高さが変わる、&レスポンシブという理由でただのheight指定はだめ。
ということでjqueryを使って高さを取得&反映させることにしました。
iframeは基本的に同じドメインのサイトから読み込むものだと思いますが、今回は外部からということでpostMessageを使用して外部ドメインからも高さを取得できるようにします。
本来であれば望ましい形ではないのであまりオススメできる方法ではありませんが、何とかせにゃ！という時には使えるのでメモφ(.. )
iframeで読み込む側（親）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe 自動で高さを取得するテストドキュメント（親）</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{
// メッセージを受信したとき
$(window).on('message', function(event)
{
// クロスサイトリクエストフォージェリ対策（送信元の検証）
if (event.originalEvent.origin != 'http://読み込まれるサイト.com') return;
// 受信した高さをiframeに設定
$('.child-iframe').css(
{
'width': '100%',
'height': event.originalEvent.data
});
});
});
</script>
<iframe class="child-iframe" src="http://読み込まれるサイト.com/iframe.html"></iframe>
</body>
</html>
iframeで読み込まれる側（子）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe 自動で高さを取得するテストドキュメント（子）iframe側</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{
// iframeの高さ
var height = $(document).height();
// 親へiframeの高さを送信
// postMessage(<送信する値>, <送信先のドメイン>)
window.parent.postMessage(height, 'http://読み込むサイト.com');
});
</script>
これで無事に自動的に高さが変わるようになりました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ
だがしかし、テスト環境ではうまくいったものの本番環境では自分が書いたコード以後にjqueryを読み込む仕様になっており自分が書いた部分が動かない！
jqueryを先に読むのを忘れずに。。
参考にさせていただきました。ありがとうございますm(_ _)m
jQueryで同一ドメインまたはクロスドメインなiframeの高さを自動調整する
