如何在子窗口关闭时运行父窗口的函数?

阅读时长 5 分钟读完

当我们在网页中打开一个子窗口,有时候需要在子窗口被关闭时执行一些操作。这些操作可以是更新父窗口的内容、重置表单或者发送请求等。本文将介绍如何在子窗口关闭时运行父窗口的函数。

方法一:使用 window.opener 对象

window.opener 对象允许子窗口与父窗口进行通信。通过该对象,我们可以调用父窗口的函数,并传递参数。以下是实现的步骤:

  1. 在父窗口中定义一个函数,用于在子窗口关闭时执行。
  2. 在父窗口中打开子窗口,并将父窗口中的函数作为参数传递给子窗口。
  3. 在子窗口中注册关闭事件,当子窗口关闭时,调用父窗口传递的函数。

下面是示例代码:

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------- --------------
    --------
      -------- ------------- -
        ---------- ----- ------ --- ---- ----------
      -

      -------- ----------------- -
        --- ----------- - ------------------------- ------ ---------
        -------------------------- - ---------- -
          ----------------------------
        --
      -
    ---------
  -------
  ------
    ------- -------------------------------- ----- ---------------
  -------
-------
-- -------------------- ---- -------
--------- -----
------
  ------
    ------------ --------------
  -------
  ------
    --------- -----------
  -------
-------

在上面的代码中,当用户点击“Open Child Window”按钮时,会打开一个子窗口。然后,在子窗口中注册 onbeforeunload 事件,该事件会在子窗口关闭之前触发。在这个事件处理程序中,我们调用 window.opener.showMessage() 函数来执行父窗口中的 showMessage() 函数。

注意:window.opener 对象只有在父窗口中打开子窗口时才能使用,如果是通过其他方式打开的子窗口,该对象将为 null。

方法二:使用事件监听器

另一种实现的方法是使用事件监听器。我们可以在父窗口中注册一个事件监听器,当子窗口关闭时触发该事件。以下是实现的步骤:

  1. 在父窗口中定义一个函数,用于在子窗口关闭时执行。
  2. 在父窗口中注册一个事件监听器,监听子窗口的关闭事件。
  3. 在子窗口中调用父窗口的函数,通知父窗口子窗口已经关闭。

下面是示例代码:

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------- --------------
    --------
      -------- ------------- -
        ---------- ----- ------ --- ---- ----------
      -

      ---------------------------------- --------------- -
        -- ----------- --- -------------------- -
          --------------
        -
      ---
      
      -------- ----------------- -
        --- ----------- - ------------------------- ------ ---------
        -------------------------------------------- ---------- -
          ---------------------------------------------- -----
        ---
      -
    ---------
  -------
  ------
    ------- -------------------------------- ----- ---------------
  -------
-------
-- -------------------- ---- -------
--------- -----
------
  ------
    ------------ --------------
    --------
      --------------------------------------- ---------- -
        ---------------------------------------------- -----
      ---
    ---------
  -------
  ------
    --------- -----------
  -------
-------

在上面的代码中,当用户点击“Open Child Window”按钮时,会打开一个子窗口。然后,在子窗口中注册 beforeunload

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26931

纠错
反馈