打开弹出窗口并刷新父页面是前端开发中常见的需求。本文将介绍如何以简单而有效的方式实现这一功能。
背景知识
在 JavaScript 中，操作浏览器窗口和页面的 API 是 window 对象。我们可以通过该对象的方法来控制当前页面和与之交互的其他页面。
其中，window.open() 方法可以打开一个新的浏览器窗口或标签页，并返回一个指向该窗口的引用。而 window.opener 属性则可以获取打开当前页面的窗口或标签页的引用。
实现方法
要打开一个弹出窗口并刷新父页面，我们可以按照以下步骤进行操作：
- 在父页面中定义一个函数，用于刷新页面的内容。例如：
function refreshPage() {
// 刷新页面的代码
}- 在父页面中使用
window.open()方法打开弹出窗口。例如：
var popupWindow = window.open('popup.html', 'Popup Window');这里的第一个参数是弹出窗口的 URL，第二个参数是弹出窗口的名称。
- 在弹出窗口中定义一个函数，用于调用父页面的
refreshPage()函数。例如：
function refreshParentPage() {
window.opener.refreshPage();
}- 在弹出窗口中添加一个按钮或链接，用于触发
refreshParentPage()函数。例如：
<button onclick="refreshParentPage()">刷新父页面</button>
- 在弹出窗口中使用
window.onunload事件监听器，当弹出窗口关闭时自动刷新父页面。例如：
window.onunload = function() {
window.opener.refreshPage();
}这样，当用户点击弹出窗口中的“刷新父页面”按钮或关闭弹出窗口时，父页面都会被刷新。
示例代码
以下是完整的示例代码，用于演示如何打开弹出窗口并刷新父页面。
父页面（parent.html）
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------
-------
------
------------
------- -------------------------------------
--------
-------- ----------- -
--- ----------- - ------------------------- ------ ---------
-
-------- ------------- -
------------------
-
---------
-------
-------弹出窗口页面（popup.html）
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-------------
------- ----------------------------------------
--------
-------- --------------- -
----------------------------
-
--------------- - ---------- -
----------------------------
-
---------
-------
-------指导意义
本文介绍了如何打开弹出窗口并刷新父页面，这是前端开发中一个常见的需求。通过掌握 window 对象的相关方法和属性，我们可以实现灵活而高效的页面交互效果。
在实际项目中，我们还可以根据不同的业务需求进行扩展和优化。例如，可以使用更加美观和易用的弹出组件库，或者利用浏览器的本地存储机制在父页面和弹出窗口之间传递数据等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12169
