HTML5 页面跳转和参数传递

页面跳转:

方法一:

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


方法二:

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


方法三:

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



html前进后退方法:

  1. <input type=button value=刷新 onclick="window.location.reload()">
  2. <input type=button value=前进 onclick="window.history.go(1)">
  3. <input type=button value=后退 onclick="window.history.go(-1)">
  4. <input type=button value=前进 onclick="window.history.forward()">
  5. <input type=button value=后退 onclick="window.history.back()">


Javascript刷新页面的几种方法:

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




HTML5传递参数:

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


页面一:

 
   
  1. <html>
  2. <head>
  3. <title>a </title>
  4. <style type="text/css">
  5. * { margin: 0}
  6. body { text-align:center; min-width: 760px}
  7. div { padding: 3px 3px 3px 3px}
  8. #main { width: 720px; margin: 0 auto; text-align:left; margin-top: 30px}
  9. #main div span { width: 50px}
  10. </style>
  11. <script type="text/javascript">
  12. /***
  13. * @param {string} cookieName Cookie名称
  14. * @param {string} cookieValue Cookie值
  15. * @param {number} nDays Cookie过期天数
  16. */
  17. function SetCookie(cookieName,cookieValue,nDays) {
  18. /*当前日期*/
  19. var today = new Date();
  20. /*Cookie过期时间*/
  21. var expire = new Date();
  22. /*如果未设置nDays参数或者nDays为0,取默认值1*/
  23. if(nDays == null || nDays == 0) nDays = 1;
  24. /*计算Cookie过期时间*/
  25. expire.setTime(today.getTime() + 3600000 * 24 * nDays);
  26. /*设置Cookie值*/
  27. document.cookie = cookieName + "=" + escape(cookieValue)
  28. + ";expires=" + expire.toGMTString();
  29. }
  30. function login() {
  31. var username = $( "user").value;
  32. var password = $( "pass").value;
  33. /*是否选中7天内无需登录*/
  34. var save = $( "save").checked;
  35. if(username== "abc" && password== "abc") {
  36. if(save) SetCookie( "username",username, 7);
  37. else SetCookie( "username",username, 1);
  38. /*跳转到ex8.html页面*/
  39. document.location = "b.htm";
  40. } else {
  41. alert( "用户名或密码错误!");
  42. }
  43. }
  44. function $(id) {
  45. return document.getElementById(id);
  46. }
  47. </script>
  48. </head>
  49. <body>
  50. <div id="main">
  51. <div> <span>用户名: </span> <input type="text" id="user" /> </div>
  52. <div> <span>密码: </span> <input type="password" id="pass" /> </div>
  53. <div>
  54. <input type="checkbox" id="save" />
  55. 7天内无需登录
  56. <input type="button" onclick="login()" value="登录" />
  57. </div>
  58. </div>
  59. </body>
  60. </html>




页面二:

 
   
  1. <html>
  2. <head>
  3. <title>b </title>
  4. <script type="text/javascript">
  5. /***
  6. *读取指定的Cookie值
  7. *@param {string} cookieName Cookie名称
  8. */
  9. function ReadCookie(cookieName) {
  10. var theCookie = "" + document.cookie;
  11. var ind = theCookie.indexOf(cookieName);
  12. if(ind== -1 || cookieName== "") return "";
  13. var ind1 = theCookie.indexOf( ';',ind);
  14. if(ind1== -1) ind1 = theCookie.length;
  15. /*读取Cookie值*/
  16. return unescape(theCookie.substring(ind+cookieName.length+ 1,ind1));
  17. }
  18. function $(id) {
  19. return document.getElementById(id);
  20. }
  21. function init() {
  22. var username = ReadCookie( "username");
  23. if(username && username.length> 0) {
  24. $( "msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
  25. } else {
  26. $( "msg").innerHTML = "<a href='a.htm'>请登录</a>";
  27. }
  28. }
  29. </script>
  30. </head>
  31. <body onload="init()">
  32. <div id="msg"> </div>
  33. </body>
  34. </html>





 
   
 
   
 
   
location.href="index33.html?name=value";方式传递
 
   
(1)、
页面一
  1. <span style="font-size:14px;"> <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> </title>
  6. </head>
  7. <body>
  8. <script LANGUAGE="JavaScript">
  9. function show(){
  10. var result = document.getElementById( "name").value;
  11. location.href= "index33.html?name="+result;
  12. }
  13. </script>
  14. <style>
  15. .input7 { color: #999; width: 145px; height: 20px; border: 1px solid #CCCCCC; font-size: 12px; background-color: #fff;}
  16. </style>
  17. <input type="text" id="name" class="input7">
  18. <input type="button" value="OK" onclick="show()"/>
  19. </body>
  20. </html> </span>


 
   
 
   
 
   
 
   
 
   
 
   
页面二:
  1. <span style="font-size:14px;"> <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> </title>
  6. </head>
  7. <body>
  8. <script>
  9. function getvalue(name) {
  10. var str = window.location.search; //location.search是从当前URL的?号开始的字符串
  11. console.log()
  12. if (str.indexOf(name) != -1) {
  13. var pos_start = str.indexOf(name) + name.length + 1;
  14. var pos_end = str.indexOf( "&", pos_start);
  15. if (pos_end == -1) {
  16. alert(str.substring(pos_start));
  17. } else {
  18. alert( "没有此值~~");
  19. }
  20. }
  21. }
  22. </script>
  23. <input type="button" onclick="getvalue('name')" value="GetValue">
  24. </body>
  25. </html> </span> <span style="font-size: 14px;">
  26. </span>


(2)、
页面一:
  1. <span style="font-size:14px;"> <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> </title>
  6. <script>
  7. function to(){
  8. var getval = document.getElementById( "cc").value;
  9. var aa = document.getElementById( "aa").value;
  10. location.href = "index22.html?cc="+getval + "&" + "aa="+aa;
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <input type="text" id="aa">
  16. <input type="text" id ="cc" >
  17. <input type="button" value="a" onclick="to()” >
  18. </body>
  19. </html></span>

 
   
 
   
页面二:
  1. <span style="font-size:14px;"> <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> </title>
  6. <script>
  7. var thisURL = document.URL;
  8. //分割成字符串
  9. var getval =thisURL.split( '?')[ 1];
  10. var keyValue = getval.split( '&');
  11. var showval = "所有value 值为:";
  12. for( var i = 0;i <keyValue.length;i++){
  13. var oneKeyValue = keyValue[i];
  14. var oneValue = oneKeyValue.split( "=")[ 1];
  15. showval = showval + oneValue + ";"
  16. }
  17. function showvalf(){
  18. alert(showval);
  19. document.getElementById( 'ee').value=showval;
  20. }
  21. </script>
  22. </head>
  23. <body onload="showvalf()">
  24. <input type="text" id ="ee" >
  25. </body>
  26. </html>
  27. </span>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值