javascript父子页面传参

在JavaScript编程中，父子页面之间的通信是一个常见的需求，特别是在单页应用（SPA）或框架如Vue、React和Angular中。本篇文章将详细讲解如何在父子页面之间传递参数，并通过提供的DEMO文件（a.html、c.html、b.html）进行实例说明。 我们要区分两种类型的情况：一种是父页面到子页面的传参，另一种是子页面到父页面的传参。 1. **父页面到子页面传参**： 这种情况通常发生在弹出窗口或者iframe中加载子页面时。我们可以通过URL查询字符串或者`window.open()`函数的第二个参数来传递数据。 - **URL查询字符串**：在子页面URL后添加`?key=value`的形式，例如`child.html?key=parentData`。在子页面中，可以通过`window.location.search`获取查询字符串，并使用`URLSearchParams` API解析获取参数值。 - **`window.open()`函数**：在父页面中，可以使用`window.open(url, name, features, replace)`，其中`url`可以包含传递的参数，而子页面可以通过上述方式解析。 2. **子页面到父页面传参**： - **`window.opener`属性**：子页面可以访问`window.opener`，它是打开当前页面的窗口对象。可以通过`window.opener.postMessage()`发送消息，父页面需要监听`message`事件接收这些消息。 - **`postMessage()` API**：这是一个跨窗口通信的API，允许页面向任何其他打开的窗口发送消息。在子页面中，调用`window.parent.postMessage(data, targetOrigin)`，在父页面中，注册`window.addEventListener('message', function(event) { ... })`事件处理器。 3. **使用`localStorage`或`sessionStorage`**： - 如果页面在同一浏览器窗口或标签页内，可以利用Web存储API，如`localStorage`或`sessionStorage`。在父页面设置数据，子页面通过监听`storage`事件获取数据。 4. **使用事件委托**： - 父页面可以在全局范围设置事件监听器，子页面触发特定事件（如自定义事件）时，父页面能捕获到并处理数据。 5. **通过`window.name`属性**： - `window.name`属性是唯一不会在页面刷新时丢失的属性，可以用于在父子页面间传递数据，但这种方法的局限性在于只能存储字符串。 在提供的DEMO文件中，可能包含了以上一种或多种技术的示例。例如，a.html可能是父页面，b.html和c.html是子页面，它们之间通过上述方法进行数据交换。通过查看源代码，我们可以深入理解这些方法的具体实现。 JavaScript父子页面传参涉及多种技术，根据实际场景选择合适的方法。理解并熟练掌握这些技术对于开发交互丰富的Web应用至关重要。在实际项目中，还应注意安全性问题，避免跨站脚本攻击（XSS）等风险。