HTML5 页面跳转和参数传递

最新推荐文章于 2022-10-14 16:56:44 发布

良哉

最新推荐文章于 2022-10-14 16:56:44 发布

阅读量2.9w

点赞数 6

分类专栏： HTML5 文章标签： html html5 传递参数页面跳

本文链接：https://blog.csdn.net/FiveNineMinutes/article/details/50949656

版权

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

页面跳转：

方法一:

<script language="javascript">
    window.location = "http://www.baidu.com";
</script>

方法二:

<script language="javascript">
    document.location = "http://www.baidu.com";
</script>

方法三：

<head>
<!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

html前进后退方法：

<input type=button value=刷新 οnclick="window.location.reload()">
<input type=button value=前进 οnclick="window.history.go(1)">
<input type=button value=后退 οnclick="window.history.go(-1)">
<input type=button value=前进 οnclick="window.history.forward()">
<input type=button value=后退 οnclick="window.history.back()">

Javascript刷新页面的几种方法：

1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href

HTML5传递参数:

一、使用Cookie传递参数，a页面保存Cookie，b页面读取，代码如下：

页面一：

<html>
<head>
<title>a</title>
<style type="text/css">
* {margin:0}
body {text-align:center;min-width:760px}
div {padding:3px 3px 3px 3px}
#main {width:720px;margin:0 auto;text-align:left;margin-top:30px}
#main div span {width:50px}
</style>

<script type="text/javascript">
/***
* @param {string} cookieName Cookie名称
* @param {string} cookieValue Cookie值
* @param {number} nDays Cookie过期天数
*/
function SetCookie(cookieName,cookieValue,nDays) {
    /*当前日期*/
    var today = new Date();
    /*Cookie过期时间*/
    var expire = new Date();
    /*如果未设置nDays参数或者nDays为0，取默认值1*/
    if(nDays == null || nDays == 0) nDays = 1;
    /*计算Cookie过期时间*/
    expire.setTime(today.getTime() + 3600000 * 24 * nDays);
    /*设置Cookie值*/
    document.cookie = cookieName + "=" + escape(cookieValue)
        + ";expires=" + expire.toGMTString();
}
function login() {
    var username = $("user").value;
    var password = $("pass").value;
    /*是否选中7天内无需登录*/
    var save = $("save").checked;
    if(username=="abc" && password=="abc") {
        if(save) SetCookie("username",username,7);
        else SetCookie("username",username,1);
        /*跳转到ex8.html页面*/
        document.location = "b.htm";
    } else {
        alert("用户名或密码错误！");
    }
}
function $(id) {
    return document.getElementById(id);
}
</script>
</head>
<body>
    <div id="main">
        <div><span>用户名：</span><input type="text" id="user" /></div>
        <div><span>密码：</span><input type="password" id="pass" /></div>
        <div>
            <input type="checkbox" id="save" />
            7天内无需登录
            <input type="button" οnclick="login()" value="登录" />
        </div>
    </div>
</body>
</html>

页面二：

<html>
<head>
<title>b</title>
<script type="text/javascript">
/***
*读取指定的Cookie值
*@param {string} cookieName Cookie名称
*/
function ReadCookie(cookieName) {
    var theCookie = "" + document.cookie;
    var ind = theCookie.indexOf(cookieName);
    if(ind==-1 || cookieName=="") return "";
    var ind1 = theCookie.indexOf(';',ind);
    if(ind1==-1) ind1 = theCookie.length;
    /*读取Cookie值*/
    return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}

function $(id) {
    return document.getElementById(id);
}

function init() {
    var username = ReadCookie("username");
    if(username && username.length>0) {
        $("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
    } else {
        $("msg").innerHTML = "<a href='a.htm'>请登录</a>";
    }
}
</script>
</head>
<body οnlοad="init()">
    <div id="msg"></div>
</body>
</html>

二、location.href="index33.html?name=value";方式传递

(1)、

页面一

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script LANGUAGE="JavaScript">
    function show(){
        var result = document.getElementById("name").value;
        location.href="index33.html?name="+result;
    }
</script>

<style>
    .input7 {color: #999;width:145px;height:20px;border: 1px solid #CCCCCC; font-size:12px;background-color: #fff;}
</style>


<input type="text" id="name" class="input7">
<input type="button" value="OK" οnclick="show()"/>


</body>
</html></span>

页面二:

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
    function getvalue(name) {

        var str = window.location.search;   //location.search是从当前URL的?号开始的字符串

        console.log()

        if (str.indexOf(name) != -1) {

            var pos_start = str.indexOf(name) + name.length + 1;
            var pos_end = str.indexOf("&", pos_start);

            if (pos_end == -1) {
                alert(str.substring(pos_start));
            } else {
                alert("没有此值~~");
            }
        }
    }
</script>

<input type="button" οnclick="getvalue('name')" value="GetValue">
</body>
</html></span><span style="font-size: 14px;">
</span>

(2)、

页面一：

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function to(){

            var  getval = document.getElementById("cc").value;
            var  aa = document.getElementById("aa").value;
            location.href = "index22.html?cc="+getval + "&" +"aa="+aa;
        }
    </script>
</head>
<body>


<input type="text" id="aa">
<input type="text" id ="cc" >
<input type="button"  value="a"  οnclick="to()” >
</body>
</html></span>

页面二：

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var thisURL = document.URL;

        //分割成字符串
        var  getval =thisURL.split('?')[1];

        var keyValue = getval.split('&');

        var showval = "所有value 值为：";
        for(var i = 0;i <keyValue.length;i++){
            var oneKeyValue = keyValue[i];
            var oneValue = oneKeyValue.split("=")[1];

            showval = showval + oneValue + ";"
        }

        function  showvalf(){
            alert(showval);
            document.getElementById('ee').value=showval;
        }
    </script>

</head>
<body οnlοad="showvalf()">

<input type="text"  id ="ee" >
</body>
</html>
</span>