親フレームから子フレームのJavaScriptの操作、および子フレームから親フレームのJavaScript関数の呼び出しについてまとめます。
目次
利用するHTML
先に完成形のHTMLです。
こちらの内容にそって説明していきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>親フレーム</title>
</head>
<body>
<h1>親フレーム</h1>
<p id="counter">0</p>
<iframe src="./child.html" id="childFrame"></iframe>
<button type="button" onclick="childCountUp()">子フレームのcountUp()を操作するchildCountUp()を実行</button>
<script>
let counter = 0;
function countUp() {
counter = counter + 1;
document.getElementById('counter').innerText = counter;
}
function childCountUp() {
document.getElementById('childFrame').contentWindow.countUp();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子フレーム</title>
</head>
<body>
<h1>子フレーム</h1>
<p id="counter">0</p>
<button type="button" onclick="parentCountUp()">親フレームのcountUp()を操作するparentCountUp()を実行</button>
<script>
let counter = 0;
function countUp() {
counter = counter + 1;
document.getElementById('counter').innerText = counter;
}
function parentCountUp() {
window.parent.countUp();
}
</script>
</body>
</html>
親フレームから子フレームのJavaScriptの関数を実行
親フレームから子フレームを呼び出すためにはiframeにid属性なりclass属性なりなにかしらターゲットにするiframeオブジェクトを指定して子フレームにアクセスします。
// ID指定でアクセス
document.getElementById('子フレームのID').contentWindow.countUp();
子フレームから親フレームのJavaScriptの関数を実行
子フレームから親フレームのJavaScript操作は簡単で、window.parent.xxxでいろいろできます。
window.parent.countUp();
どちらも知っていれば簡単ですね。
