公開日 最終更新日 JavaScript

【JavaScript】iframeから親フレームの関数を実行、および親フレームからiframe内の関数を実行




この記事は最終更新日から2年以上経過しています。

親フレームから子フレームの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();

どちらも知っていれば簡単ですね。




シェア！

RECOMMENDこちらの記事も人気です。