正文

如何从JS中获取父页面传递的参数：揭秘网页间数据传递的简单方法

/0 浏览量
0522

在网页开发中，有时候我们需要在不同页面之间传递数据。这可以通过多种方式实现，其中一种简单且常见的方法是通过URL参数进行数据传递。以下将详细介绍如何从子页面（JS页面）中获取由父页面传递过来的参数。

基本概念

在HTML中，可以通过在URL中添加查询字符串来传递参数。查询字符串是通过?符号后跟一系列键值对组成的，键值对之间由&符号分隔。例如：

http://example.com/page.html?name=John&age=30

在这个例子中，name和age就是传递的参数。

从JS获取URL参数

要在JavaScript中获取这些参数，我们可以使用window.location.search属性来获取整个查询字符串，然后通过解析这个字符串来提取出需要的参数。

1. 获取查询字符串

首先，我们可以通过window.location.search获取查询字符串：

var queryString = window.location.search;

2. 解析查询字符串

接下来，我们需要解析这个查询字符串，将其转换为可以操作的键值对对象。以下是一个函数，它接受查询字符串并返回一个对象：

function getQueryParams(queryString) {
    var params = {};
    queryString = queryString.substring(1); // 去掉开头的'?
    var vars = queryString.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return params;
}

var queryParams = getQueryParams(queryString);

3. 使用参数

现在我们已经有了参数对象queryParams，我们可以通过键名来访问传递的参数值：

var name = queryParams.name; // 输出: John
var age = queryParams.age; // 输出: 30

实际应用

以下是一个简单的示例，展示如何在子页面中获取父页面传递的参数：

<!-- 子页面index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
    <script>
        // 获取查询字符串
        var queryString = window.location.search;
        // 解析查询字符串
        var queryParams = getQueryParams(queryString);
        // 使用参数
        var name = queryParams.name;
        var age = queryParams.age;
        console.log("Name:", name);
        console.log("Age:", age);
    </script>
</body>
</html>

在这个例子中，我们假设父页面在跳转到子页面时传递了name和age两个参数。

总结

通过URL参数传递数据是一种简单、直接的数据传递方式。在JavaScript中，我们可以通过解析URL来获取这些参数，从而实现页面间的数据传递。这种方法适用于简单的数据传递场景，但如果需要传递大量或复杂的数据，可能需要考虑其他方法，如使用本地存储或发送AJAX请求。

-- 展开阅读全文 --