web静态页面之间传值

作者: 管家頗 | 来源:发表于2016-11-02 17:03 被阅读111次

web静态页面之间传值
vue通信、传值的多种方式
2020-08-19 swift 传值的几个方式
Flutter页面/组件传值
参数绑定与传值
Android四大组件之Activity(2)组件间通信
从0开始学PHP web简介（－）
页面之间传值
iOS - 页面之间几个常用的传值方式
ios常用的三种传值方式

方法一：将要传的值拼接到URL中，页面跳转后，从URL获取参数值

原页面demo1：

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script type="text/javascript">
        function toDemo2() { 
           var txt1=document.getElementById("txt1").value;            var txt2=document.getElementById("txt2").value; 
           var myUrl="demo2.html"+"?"+"txt1="+txt1+"&txt2="+txt2; 
           window.location.assign(myUrl);
        }
    </script>
</head>
<body>
<body>
    <label id="label" >page test3</label>
    <br><br>
    <input type="text" id="txt1">
    <input type="text" id="txt2"> 
   <input type="button" id="btn" value="to demo2" onclick="toDemo2()">
</body>
</html>

跳转后的页面Demo2：

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <script type="text/javascript">
        function getTextValue() {
            //获取URL字符串
            var myUrl = location.href;
            alert(myUrl); 

           //获取URL中？后的参数字符串
            var parameterStr = myUrl.split("?")[1]; 
           //分割字符串，生成存放参数名和参数值的数组
            var parArray = parameterStr.split("&");

            //遍历数组，获取每个参数的参数名和参数值 
           for (var i = 0; i<parArray.length; i++){  
              var parameter = parArray[i]; 

               //分割字符串，获取参数名、参数值
                var parName = parameter.split("=")[0]; 
               //参数名(一般声明为英文)为中文时进行解码
                parName = decodeURI(parName); 

               var parValue = parameter.split("=")[1];
                //参数值为中文时进行解码
                parValue = decodeURI(parValue); 

               alert(parName+"="+parValue);
            }
        }
    </script>
</head>
<body>
    <label id="label1" >page demo2</label>
    <br><br>
    <input type="button" id="bt1" value="get textValue" onclick="getTextValue()">
</body>
</html>

方法二：使用window.opener获取父窗口对象，再操作父窗口的标签

原页面test1：

<!doctype html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
   <title>test1</title>
    <script type="text/javascript">
        function totest2() {
            window.open("test2.html");
        }
    </script>
</head>
<body>
    <label id="label1" >page test1</label>
    <br><br>
    <input type="text" id="txt">
    <input type="button" value="to test2" onclick="totest2()">
</body>
</html>

跳转后页面test2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <script type="text/javascript">
        function getvalue() { 
           //获取父窗口
            var test1 = window.opener;
            if (test1){
                var txt = test1.document.getElementById("txt");  
              alert(txt.value); 
           } 
       }
    </script>
</head>
<body>
    <label id="label1" >page test2</label>
    <br><br>
    <input type="button" onclick="getvalue()" value="get test1 page value">
</body>
</html>