js如何实现跳转传参

方法一：window.open()
（说在前面）window.open()跳转页面是打开一个新的窗口，这是与window.location的一个不同点。
使用此方法跳转的新页面获取参数的办法是使用window.opener属性，指向原页面（跳转前）的window对象。最后调用你想用的数据。
页面a跳转至页面b：

<html lang="en">

<head>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <title>页面a</title>
</head>

<body>
  <div>我是跳转前的页面a</div>
  <button onclick="goTo()">window.open()</button>
  <script>
    var data = ["abcd", "efg", 111];
    var id = 100001;

    function goTo() {
      window.open("b.html");
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <title>页面b</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div>我是跳转成功页面！</div>
    <div id="showData"></div>
    <script>
    var data=window.opener.data;
    var id=window.opener.id;
    $("#showData").text(data);
    $("#showData").text(id);
    </script>
</body>

</html>

方法二：window.location
使用window.location.href=""属性进行跳转，在当前页面直接跳转即可。我们在写这个url的时候要把传递的参数也写上如
window.location.href=“b.html?data=data&id=100001”
（? 是连接域名和参数的；& 是分隔两个参数的）
在跳转页面接受参数时使用window.location.search会返回url中"?"以及其之后的所有参数。然后再对传递的数据进行操作。
页面a跳转至页面b：

<html lang="en">

<head>
  <title>页面a</title>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div>我是跳转前的页面a</div>
  <input id="text1" type="text" />
  <input type="button" value="增加data" onclick="getData()" />
  <button onclick="goTo()">window.location.href</button>
  <script>
    var data = new Array();
    var id = 100001;
    var num = 123;

    function goTo() {
      window.location.href = "b.html?data=" + data + "&id=" + id + "&num=" + num;
      alert("跳转成功");
    }

    //查看并添加传递的data
    function getData() {
      let value = $("#text1").val();
      data.push(value);
      console.log(data);
    }
  </script>
</body>


</html>

在b页面，接收一个参数比较简单，接收多个参数可能比较麻烦，要写个循环，这里我规定的是接受的参数都放进map里，map的value我都规定的是数组。
当然也可以全写数组啊什么的，根据自己的需要写。

<!DOCTYPE html>
<html>

<head>
    <title>页面b</title>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div>我是跳转成功页面！</div>
    <div id="showData"></div>
    <div id="showMap"></div>
    <script>
        var map=new Map();
        var receiveData = decodeURI(window.location.search);
        //只有一条数据时
        // var key=data.substring(data.indexOf("?")+1,data.indexOf("="));
        // var value=data.substring(data.indexOf("=")+1);
        // map.set(key,value);

        //多条数据时
        //在后面加个&是为了方便while循环
        receiveData=receiveData.substr(receiveData.indexOf("?")+1)+"&";
        //展示获取到的参数
        $("#showData").text(receiveData);
        while(receiveData!=""){
            let keyEnd=receiveData.indexOf("=");
            let valueStart=keyEnd+1;
            let valueEnd=receiveData.indexOf("&");
            //split()方法可以将字符串转为数组
            map.set(receiveData.substring(0,keyEnd),receiveData.substring(valueStart,valueEnd).split(","));
            //更新数据
            receiveData=receiveData.substr(valueEnd+1);
        }

        //循环输出map
        for(let [key,value] of map.entries()){
            console.log(key+":"+value);
        }
    </script>
</body>

</html>

还有更简洁的方法

第一个页面需要传递的

window.location.href="search-one.html?"+val//跳转到自己需要的文件

在第2个页面接收

// 接取参数
let num = window.location.search.slice(1);
let arr = decodeURI(num)//使用decode将传递过来的参数进行拆解
console.log(arr);

第二种方法


//第一个页面事件传值
	<div class="one_child" onclick='tao(${JSON.stringify(res.data[i])})
//条转页面

function tao(s){
	console.log(s);
	let k=JSON.stringify(s)
	console.log(k);
	window.location.href='dianpuxiangqi.html?item='+k
}
//第二个页获取
// 获取URL中的查询字符串部分
var queryString = window.location.search;

// 创建URLSearchParams对象
var params = new URLSearchParams(queryString);

// 获取顶部导航栏中的值
var value = params.get('item');

console.log(value);
let kk=JSON.parse(value)
console.log(kk);

js如何实现跳转传参

猜你喜欢