HTML5 页面跳转和参数传递

最新推荐文章于 2024-04-19 11:46:49 发布

qq_39611053

最新推荐文章于 2024-04-19 11:46:49 发布

阅读量2.8k

点赞数

页面跳转：

方法一:

[html]view plain copy
<script language="javascript">  
    window.location = "http://www.baidu.com";  
</script>  

方法二:

[html]view plain copy
<script language="javascript">  
    document.location = "http://www.baidu.com";  
</script>  

方法三：

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

html前进后退方法：

[html]view plain copy
<input type=button value=刷新 onclick="window.location.reload()">  
<input type=button value=前进 onclick="window.history.go(1)">  
<input type=button value=后退 onclick="window.history.go(-1)">  
<input type=button value=前进 onclick="window.history.forward()">  
<input type=button value=后退 onclick="window.history.back()">  

Javascript刷新页面的几种方法：

[html]view plain copy
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]view plain copy
<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" onclick="login()" value="登录" />  
        </div>  
    </div>  
</body>  
</html>  

页面二：

[html]view plain copy
<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 onload="init()">  
    <div id="msg"></div>  
</body>  
</html>  

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

(1)、

页面一

[html]view plain copy
<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" onclick="show()"/>  
  
  
</body>  
</html></span>  

页面二:

[html]view plain copy
<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" onclick="getvalue('name')" value="GetValue">  
</body>  
</html></span><span style="font-size: 14px;">  
</span>  

(2)、

页面一：

[html]view plain copy
<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"  onclick="to()” >  
</body>  
</html></span>  

页面二：

[html] view plain copy

<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 onload="showvalf()">
<input type="text" id ="ee" >
</body>
</html>
</span>

转载来自：http://blog.csdn.net/fivenineminutes/article/details/50949656

qq_39611053

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
HTML5 页面跳转和参数传递

页面跳转：方法一:[html] view plain copy&lt;script language="javascript"&gt; window.location = "http://www.baidu.com"; &lt;/script&gt; 方法二:[html] view plain copy&lt;script language="javascript"&gt; ..
复制链接

扫一扫