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

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

方法一：使用 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

阅读全文

猜你喜欢

  • 检查两个日期是否具有相同的日期信息

    在前端开发中，我们经常需要比较日期。当我们需要检查两个日期是否具有相同的日期信息时，我们可以使用JavaScript内置的Date对象来完成这项任务。 获取日期信息 首先，我们需要从Date对象中获取...

    7 年前
  • Javascript: how to dynamically create nested objects using object names given by an array

    Brian WebsterDavid提出了一个问题：Javascript: how to dynamically create nested objects using object names gi...

    7 年前
  • AngularJS $http Post文件和表单数据

    AngularJS是一个强大的前端JavaScript框架，可以帮助开发人员构建高度交互式和动态的Web应用程序。在本文中，我们将深入介绍如何使用AngularJS的$http服务发送POST请求以上...

    7 年前
  • Invalid version specified, facebook share plugin error

    在开发前端网站时，Facebook Share Plugin 是一个非常流行的选项，它允许用户分享内容到他们的 Facebook 帐户。但是，在使用该插件时，可能会遇到 "Invalid versio...

    7 年前
  • Node.js: 解决 [nodemon] Internal watch failed: watch ENOSPC 错误

    在使用 nodemon 监控 Node.js 应用程序文件变化时，有时可能会遇到以下错误： --------- -------- ----- ------- ----- ------这个错误表示监视器...

    7 年前
  • 如何在 Chart.js 中将 Y 轴的实数值更改为整数

    Chart.js 是一个强大且易于使用的 JavaScript 库，用于创建各种类型的交互式图表。在使用 Chart.js 时，您可能需要更改默认设置以满足您特定的需求。

    7 年前
  • Javascript Array Concat不起作用。为什么？

    当使用JavaScript数组时，您可能会遇到需要将两个或多个数组合并为一个的情况。数组提供了一个名为concat()的方法，该方法可用于将多个数组合并为一个数组。

    7 年前
  • 缩放图片以适应画布

    在前端开发中，经常需要将图像缩放以适应不同的容器大小。本文将介绍如何使用JavaScript和HTML5 Canvas来实现图像的自适应缩放。 HTML5 Canvas HTML5 Canvas是一个...

    7 年前
  • 如何取消绑定特定的事件处理程序

    在前端开发中，我们常常需要添加事件监听器来响应用户的交互操作。但是，在某些情况下，我们需要取消已经绑定的事件处理程序。本文将介绍如何使用 JavaScript 取消特定的事件处理程序。

    7 年前
  • Delete vs Splice 在关联数组中的区别

    JavaScript 中，我们通常使用数组来存储一组有序的数据。然而，有时候我们需要对一个对象进行类似于数组的操作。在 JavaScript 中，我们可以使用关联数组（也称作对象）来完成这个任务。

    7 年前
  • 如何在 Angular 2 中使用 Protractor

    Protractor 是一个强大的端到端测试框架，专为 Angular 应用程序而设计。本文将介绍如何在 Angular 2 中使用 Protractor 进行自动化测试。

    7 年前
  • 如何在 AngularJS 中使用 HTTPS

    在当前的互联网时代，保护用户数据的安全性变得越来越重要。HTTPS 协议是一种常用的加密传输协议，可以有效地保护网络通信过程中的数据安全。本文将介绍如何在 AngularJS 中使用 HTTPS 协议...

    7 年前
  • Angular 中的双美元符号 ($$) 是用来干什么的？

    如果你在学习 Angular 框架，你可能已经听说过双美元符号（$$）。这个符号在 Angular 中有着特殊的用途，本文将为你深入讲解。 双美元符号的作用 在 Angular 中，双美元符号通常被用...

    7 年前
  • AngularJS Promise Callback Not Trigged in JasmineJS Test

    在使用AngularJS编写单元测试时，您可能会遇到Promise回调未触发的情况。这种情况通常出现在JasmineJS测试中，可能会导致测试失败或不完整。 问题描述 假设有一个服务myService...

    7 年前
  • 关闭AngularJS中的URL操作

    在AngularJS中，可以使用$location服务来管理浏览器地址栏中的URL。默认情况下，AngularJS会将URL与应用程序状态同步，以便用户可以通过书签或刷新页面来访问特定的页面状态。

    7 年前
  • AngularJS中的有状态过滤器是什么？

    AngularJS是一种流行的前端框架，它提供了许多内置的过滤器，用于在视图中格式化数据。其中之一是有状态过滤器，它可以根据先前选择或输入的值过滤数据。 什么是有状态过滤器？ AngularJS中的过...

    7 年前
  • AngularJS - ng-disabled 不适用于锚点标签

    当我们在使用AngularJS时，可能会遇到一些问题，例如ng-disabled指令在锚点标签上不起作用。这可能导致一些不必要的麻烦，但是我们可以通过一些简单的步骤来解决这个问题。

    7 年前
  • $timeout not defined error in AngularJS app

    在使用AngularJS应用程序时，您可能会遇到$timeout未定义的错误。这种错误通常意味着您忘记了注入$timeout服务，并且在使用它之前需要将其作为依赖项注入到您的控制器或服务中。

    7 年前
  • 在 Angular 中如何动态加载外部脚本？

    在开发 Web 应用程序时，我们经常需要加载第三方库或其他 JavaScript 文件。在 Angular 中，我们可以使用 import 语句来导入这些文件并在应用程序中使用它们。

    7 年前
  • 在 Karma 测试文件中为 Angular 应用程序引入依赖项

    在编写 Angular 应用程序的单元测试时，不仅需要针对组件进行测试，还需要测试与其他部分的集成。为了实现这一点，我们可能需要在 Karma 测试文件中引入一些依赖项。

    7 年前

相关推荐

    暂无文章