iframeの親から子、子から親の操作をする

親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法をメモ。

要素の操作をする

必要箇所だけ抜粋していますので、詳細はデモページでご確認ください。

HTML(親ページ)

<div id="oya">
<input type="text" /><button>実行</button>
<div id="oya-result">結果がここに反映されます。</div>
</div>
<iframe id="child-frame" src="child.html"></iframe>

HTML(子ページ)

<div id="ko">
<p>子</p>
<input type="text" id="" /><button>実行</button>
<div id="ko-result">結果がここに反映されます。</div>
</div>

JavaScript(親ページ)

$(function() {
	$(document).on('click', '#oya button', function() {
		$('#child-frame').contents().find('#ko-result').text($('#oya input').val());
	});
});

JavaScript(子ページ)

$(function() {
	$(document).on('click', '#ko button', function() {
		$('#oya-result' ,parent.document).text($('#ko input').val());
	});
});

親ページでは、ボタンがクリックされた時にiframe内のテキストを書き換える処理をしています。
JavaScript3行目の#child-frameでiframeを指定して、contents()でiframe内の全要素を取得、find()でiframe内の要素を探して操作しています。

子ページでは逆に、parent.documentで親ページを指定して、その中の#oya-resultという要素に対して操作をしています。

要素の操作をするデモページ
　

関数を実行する

必要箇所だけ抜粋していますので、詳細はデモページでご確認ください。

HTML(親ページ)

<div id="oya">
<button>iframe内の関数実行</button>
</div>
<iframe id="child-frame" src="child2.html"></iframe>

HTML(子ページ)

<div id="ko">
<button>親ページの関数実行</button>
</div>

JavaScript(親ページ)

function oyaFunc() {
	alert('親ページの関数が実行されました。');
}

$(function() {
	$(document).on('click', '#oya button', function() {
		document.getElementById('child-frame').contentWindow.koFunc();
	});
});

JavaScript(子ページ)

function koFunc() {
	alert('iframe内の関数が実行されました。');
}

$(function() {
	$(document).on('click', '#ko button', function() {
		window.parent.oyaFunc();
	});
});

関数を実行するデモページ
　

【参考サイト】

• jQueryでiframe内のページから親ページを操作する方法 | BlackFlag
• iframe内のJavaScriptの実行と、iframeから親ページのJavaScriptの実行 | milestoner
• JavaScript – 同一ドメインのインラインフレームの関数を呼び出す – Qiita