在前端开发中，经常需要在弹出窗口中进行一些操作，例如选择某个值并将其传递回父窗口。本文将介绍如何使用JavaScript实现此功能，并提供具有深度和指导意义的示例代码。
示例场景
我们假设有一个需求：在父窗口中有一个输入框，当用户单击该输入框时，会弹出一个窗口，其中包含一个下拉列表，用户可以从中选择一个值。选择完毕后，该值将被传递回父窗口并填充到输入框中。
实现方法
实现这个需求的关键在于如何在子窗口中获取所选的值，并将其传递回父窗口。我们可以使用以下步骤来完成：
- 在父窗口中创建一个输入框和一个按钮，用于触发弹出窗口。
- 在按钮的点击事件中，打开一个新窗口，并在其中显示下拉列表。
- 当用户选择了一个值并单击了“确定”按钮时，将所选值保存到一个变量中。
- 关闭子窗口，并将所选值传递回父窗口。
- 在父窗口中监听子窗口的关闭事件，并获取传递回来的值。
- 将所选值填充到父窗口的输入框中。
下面是示例代码：
---- --- ---
------ ----------- ---------------
------- ---------------------------------
--------
-------- ----------- -
-- -----
--- ----- - ------------------------- -------- ------------------------
-- ----------
-------------------- - ---------- -
-- -----------
--- ------------- - --------------------
-- -----------
------------------------------------------ - --------------
-
-
------------- ---- --- ------- ---------------- ------- --------------------------- ------- --------------------------- ------- --------------------------- --------- ------- ----------------------------------- -------- -------- ------------- - -- -------- --- ------------- - -------------------------------------------- -- ---------- --------------------------- - -------------- -- ------ --------------- - ---------
在上面的代码中，我们使用 window.open() 方法打开了一个新窗口。该方法的第一个参数指定要打开的页面的URL，第二个参数指定打开窗口的名称，第三个参数是一个字符串，用于指定窗口的大小和位置等属性。
在弹出窗口中，我们使用 document.getElementById() 方法获取了下拉列表的值，并将其保存到一个变量中。然后，我们使用 window.opener 属性来访问父窗口。该属性返回对打开当前窗口的窗口的引用。因此，我们可以通过它来传递所选值。最后，我们使用 window.close() 方法关闭弹出窗口。
在父窗口中，我们使用 popup.onbeforeunload 事件监听子窗口的关闭事件。该事件在子窗口关闭之前触发，因此我们可以在其中获取子窗口传递回来的值，并将其填充到输入框中。
总结
本文介绍了如何使用JavaScript将弹出窗口中选择的值传递回父窗口，并提供了
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31106