首頁 > 文章 > web前端 > jquery 執行父頁面方法

jquery 執行父頁面方法

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

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

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

父頁面中定義方法
子頁面取得父頁引用
子頁面呼叫父頁面方法
另一種方法執行父頁面方法
父頁面中定義方法
在父頁面中的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()"的方法，這個方法用於彈出一個對話框，並顯示一條簡單的訊息。我們將在子頁面中呼叫這個方法。

子頁面取得父頁引用
首先，我們需要在子頁面中取得父頁的參考。我們可以透過使用window.parent屬性來實作：

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

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

子頁面呼叫父頁面方法
在取得到對父頁面的參考之後，我們就可以呼叫在父頁面中定義的方法：

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

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

另一種方法執行父頁面方法
還有一種方法可以執行父頁面中的方法，我們可以在子頁面中使用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

上一篇：jquery 怎麼存取資料庫下一篇：jquery 怎麼存取資料庫

看更多