JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでiframeから親ウィンドウの関数を呼び出す方法を解説

iframe内から親ウィンドウ（親ページ）で定義された関数を呼び出すには、window.topを使用します。window.topは、最上位階層にある親ウィンドウへの参照を返すプロパティで、これを経由することでiframeの中からでも親ウィンドウの関数や変数にアクセスできます。

サンプルコード

以下のコードは、iframe内のリンクをクリックした際に、親ウィンドウ側で定義されたdisplay()関数を呼び出す例です。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function display(){
            alert("Hello World!");
         }
      </script>
      <iframe id="myFrame">
         <a onclick="window.top.display();" href="#">クリック</a>
      </iframe>
   </body>
</html>

window.parentとの違い

親ウィンドウへの参照を取得する方法として、window.parentもあります。window.parentは直近の親ウィンドウを参照するのに対し、window.topはネストされたiframe構造の最上位ウィンドウを参照します。単純な1階層のiframeであれば、どちらも同じウィンドウを指しますが、入れ子構造の場合は用途に応じて使い分けが必要です。

注意点：同一オリジンポリシー

iframeと親ウィンドウが異なるドメイン（クロスオリジン）の場合、セキュリティ上の制約である「同一オリジンポリシー」により、window.topを使っても親ウィンドウの関数を呼び出すことはできません。親子間で通信を行いたい場合は、postMessage()を利用したメッセージ通信の仕組みを採用しましょう。

  1. JavaScript関数からオブジェクトを返す方法をわかりやすく解説

    JavaScriptの関数からオブジェクトを返すには、return文を使用します。オブジェクト内のプロパティやメソッドにアクセスする際は、thisキーワードを活用すると便利です。この記事では、実際のコード例を使いながら、JavaScript関数からオブジェクトを返す基本的な方法を解説します。基本的な考え方JavaScriptでは、オブジェクトの中にメソッド（関数）を定義できます。そのメソッド内でreturn文を使えば、処理結果や値を呼び出し元に返すことができます。また、thisキーワードを参照することで、同じオブジェクト内の他のプロパティにアクセス可能です。サンプルコード以下のコードでは、従業

  2. 【C++】派生クラスの関数から親クラスの関数を呼び出す方法

    C++では、親クラスと同じ名前の関数を派生クラスで再定義（オーバーライド）した場合でも、スコープ解決演算子「::」を使えば、派生クラスの関数の中から親クラスの関数を明示的に呼び出すことができます。以下に、その基本的な例を示します。 サンプルコード #include <bits/stdc++.h> using namespace std; class p1 { public: void first() { cout << \nThe parent class p1 function is called.; } }; class d