javascript 通过地址栏实现页面间传值（1）

最新推荐文章于 2021-06-28 22:38:03 发布

kaleid_liner

最新推荐文章于 2021-06-28 22:38:03 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_36735409/article/details/78200890

html 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种不依赖后台程序，通过JavaScript直接在页面间传递值的方法。通过创建两个HTML页面，如post.html和read.html，使用escape()方法将值编码后附加到URL，实现在新页面read.html中获取并解码该值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在进行网页开发的时候，有时候需要从一个界面打开另一个页面，并将当前页面中的某个值传递到新打开的页面当中。通常的做法都是先将值传递给后台程序，再通过后台程序打开新页面，并将所值传递给新页面。当然如果所传递的值不需要经过后台，我们可以通过 javascript，直接打开新页面，并将值传递过去。

首先，我们需要新建两个html网页，一个叫做post.html ，另一个叫做 read.html 。

在 post.html 中，将所需传递的值通过 escape() 方法附加到地址栏：

<html>
<head>
    <meta charset="GBK"/>
    <title></title>
    <script>
        function post(){
            var url = "read.html?name="+escape(document.all.name.value);
            url +="&password="+escape(document.all.password.value);
            window.location = url ;
        };
    </script>
</head>
<body>
姓名:<input type="text" name="name"/><br/>
密码:<input type="text" name="password"/><br/>
<input type="button" value="post" onClick="post()"/>
</body>
</html>

在 read.html 中接收传过来的值，并显示在页面上：

<html>
<head>
    <title></title>
    <script>
        window.onload = function(){
            var url = window.location.search;
            var request = new Object();
            if(url.indexOf("?")!=-1){  <!--判断是否存在，如果返回-1，则表明不存在-->
                var str = url.substr(1);   <!--从第1个字符开始截取-->
                var strs = str.split("&");<!--表示以“&’”为分隔符进行分隔，返回的是一个数组-->
                for(var i=0;i<strs.length;i++){
                    request[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                }
            }
            document.getElementById("read").innerHTML="name:"+request["name"]+"password:"+request["password"];
        };
    </script>
</head>
<body>
<div id="read"></div>
</body>
</html>