MENU

一种依赖 JavaScript 的页面传参方法

2019 年 08 月 15 日 • 阅读: 27 • 前端

无后端实现页面间参数传递,主要用于静态网页复用,依赖 JavaScript 执行环境。

目标网页代码

<html>

<head>
    <script>
        let params = new Map();

        // extract ?param1=value1 out of http://localhost/?param1=value1
        let paramsString = window.location.search.substr(1);
        if (paramsString != '') {
            // url decode
            let paramPairs = decodeURIComponent(paramsString).split('&');
            paramPairs.forEach(paramPair => {
                let param = paramPair.split('=');
                params.set(param[0], param[1]);
            });
        }

        // get values
        let value1 = params.get('param1');
        if (typeof value1 != 'undefined') {
            window.alert(value1);
        }
    </script>
</head>

<body>
</body>

</html>

参数传递方法

http://localhost/?param1=value1

除了在内存中维护一份参数字典,还可使用 Cookie、localStorage 等持久化方法实现参数传递,在此不做展开。