首頁 >web前端 >前端問答 >jquery 執行父頁面方法

jquery 執行父頁面方法

WBOY
WBOY原創
2023-05-28 13:37:111109瀏覽

在開發網頁應用程式時,經常會出現需要從一個頁面執行父頁面中的方法的情況。 jQuery是一個強大的JavaScript函式庫,它可以幫助我們輕鬆地實現這個目標。

在本文中,我們將介紹如何使用jQuery執行父頁面方法。下面,我們將分為以下幾個部分詳細講解:

  1. 父頁面中定義方法
  2. 子頁面取得父頁引用
  3. 子頁面呼叫父頁面方法
  4. 另一種方法執行父頁面方法
  5. 父頁面中定義方法
    在父頁面中的JavaScript腳本中,我們可以定義一些方法,以期望在子頁面中調用。這些方法可以是任何類型的方法,例如處理一些業務邏輯或更新一些網頁元素等等。在這裡,我們舉一個簡單的例子:
<html>
   <head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     function displayMessage(){
         alert("Hello from parent page!");
     }
   </script>
   </head>
   <body>
      <a href="child.html" target="_blank">Open Child Page</a>
   </body>
</html>

在這個例子中,我們定義了一個名為"displayMessage()"的方法,這個方法用於彈出一個對話框,並顯示一條簡單的訊息。我們將在子頁面中呼叫這個方法。

  1. 子頁面取得父頁引用
    首先,我們需要在子頁面中取得父頁的參考。我們可以透過使用window.parent屬性來實作:
$(document).ready(function(){
   var parentWindow = window.parent;
});

在這個範例中,我們使用了jQuery的document.ready()方法。這個方法等到整個頁面載入完成後再執行。我們將取得到的父頁面參考儲存在一個變數parentWindow中。

  1. 子頁面呼叫父頁面方法
    在取得到對父頁面的參考之後,我們就可以呼叫在父頁面中定義的方法:
$(document).ready(function(){
   var parentWindow = window.parent;
   parentWindow.displayMessage();
});

在這個範例中,我們呼叫了父頁面中的displayMessage()方法。我們透過造訪向父視窗傳遞的window.parent屬性來取得對父頁面的參考。然後,我們使用這個引用來呼叫父頁面中的方法。

  1. 另一種方法執行父頁面方法
    還有一種方法可以執行父頁面中的方法,我們可以在子頁面中使用window.opener屬性,它會傳回開啟目前視窗的視窗的引用。如果沒有開啟該視窗的父窗口,則該屬性會傳回null。以下是一個例子:

在父頁面中:

<html>
  <head>
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      function displayMessage(){
        alert("Hello from parent page!")
      }
    </script>
  </head>
  <body>
     <button onclick="window.open('child.html','_blank')">Open Child Page</button>
  </body>
</html>

在子頁面中:

$(document).ready(function(){
   var parentWindow = window.opener;
   parentWindow.displayMessage();
});

在這個範例中,我們使用了window.open( )方法開啟一個名為child.html的子頁面。當使用者點擊父頁面上的按鈕時,會開啟子頁面,並立即呼叫子頁面中的程式碼。

在子頁面中,我們使用window.opener屬性來取得父視窗的參考。透過這個引用,我們可以存取父頁上的任何方法或屬性。在這個範例中,我們透過父頁面引用呼叫了父頁面上的displayMessage()方法。

總結

在開發網頁應用程式時,我們經常需要從子頁面中呼叫父頁面中的方法。透過使用jQuery,我們可以輕鬆地實現這個目標。在本文中,我們介紹了兩種方法,透過這些方法,我們可以輕鬆地在子頁面中呼叫父頁面中的方法。

以上是jquery 執行父頁面方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn