javascript HTML静态页面传值的四种方法

一：JavaScript静态页面值传递之URL篇
能过URL进行传值.把要传递的信息接在URL上.
Post.htm

 1 代码如下:
 2
 3 <input type="text" name="username">
 4 <input type="text" name="sex">
 5 <input type="button" value="Post">
 6 <script language="javascript" >
 7 function Post()
 8 {
 9 //单个值 Read.htm?username=baobao;
10 //多全值 Read.htm?username=baobao&sex=male;
11 　　url = "Read.htm?username="+escape(document.all.username.value);
12 　　url += "&sex=" + escape(document.all.sex.value);
13 　　location.href=url;
14 }
15 </script>

Read.htm

代码如下:

 1 <script language="javascript" >
 2 /*
 3 *--------------- Read.htm -----------------
 4 * Request[key]
 5 * 功能:实现ASP的取得URL字符串,Request("AAA")
 6 * 参数:key,字符串.
 7 * 实例:alert(Request["AAA"])
 8 *--------------- Request.htm -----------------
 9 */
10 var url=location.search;
11 var Request = new Object();
12 if(url.indexOf("?")!=-1)
13 {
14 　　var str = url.substr(1)　//去掉?号
15 　　strs = str.split("&");
16 　　for(var i=0;i<strs.length;i++)
17 　　{
18  　　　 Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);
19 　　}
20 }
21 alert(Request["username"])
22 alert(Request["sex"])
23 </script><script language="JavaScript">
24 <!--
25 function Request(strName)
26 {
27 　　var strHref = "www.jb51.net/index.htm?a=1&b=1&c=测试测试";
28 　　var intPos = strHref.indexOf("?");
29 　　var strRight = strHref.substr(intPos + 1);
30 　　var arrTmp = strRight.split("&");
31 　　for(var i = 0; i < arrTmp.length; i++)
32 　　{
33 　　　　var arrTemp = arrTmp[i ].split("=");
34 　　　　if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
35 　　}
36 　　return "";
37 }
38 alert(Request("a"));
39 alert(Request("b"));
40 alert(Request("c"));
41 //-->
42 </script>
43 <script>
44 String.prototype.getQuery = function(name)
45 {
46 　　var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
47 　　var r = this.substr(this.indexOf("?")+1).match(reg);
48 　　if (r!=null) return unescape(r[2]); return null;
49 }
50 　　var str ="www.jb51.net/index.htm?a=1&b=1&c=测试测试";
51 　　alert(str.getQuery("a"));
52 　　alert(str.getQuery("b"));
53 　　alert(str.getQuery("c"));
54 </script>

优点:取值方便.可以跨域.
缺点:值长度有限制

二：JavaScript静态页面值传递之Cookie篇
Cookie是浏览器存储少量命名数据.
它与某个特定的网页或网站关联在一起.
Cookie用来给浏览器提供内存,
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.
Post.htm

代码如下:

 1 <input type="text" name="txt1">
 2 <input type="button" value="Post">
 3 <script language="javascript" >
 4 function setCookie(name,value)
 5 {
 6 /*
 7 *--------------- setCookie(name,value) -----------------
 8 * setCookie(name,value)
 9 * 功能:设置得变量name的值
10 * 参数:name,字符串;value,字符串.
11 * 实例:setCookie('username','baobao')
12 *--------------- setCookie(name,value) -----------------
13 */
14 　　var Days = 30; //此 cookie 将被保存 30 天
15 　　var exp　= new Date();
16    location.href = "Read.htm"; //接收页面.
17 }
18 </script>

Read.htm

代码如下:

 1 <script language="javascript" >
 2 function getCookie(name)
 3 {
 4 /*
 5 *--------------- getCookie(name) -----------------
 6 * getCookie(name)
 7 * 功能:取得变量name的值
 8 * 参数:name,字符串.
 9 * 实例:alert(getCookie("baobao"));
10 *--------------- getCookie(name) -----------------
11 */
12 　　var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
13 　　if(arr !=null) return unescape(arr[2]); return null;
14 }
15 alert(getCookie("baobao"));
16 </script>

优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.

三：JavaScript静态页面值传递之Window.open篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
Post.htm

代码如下:

1 <input type=text name=maintext>
2 <input type=button value="Open">
3 Read.htm
4 <script language="javascript" >
5 //window.open打开的窗口.
6 //利用opener指向父窗口.
7 　　var parentText = window.opener.document.all.maintext.value;
8 　　alert(parentText);
9 </script>

注意 :window.open打开时,不能够使用'_self'参数,因为这样父页面消失,找不到对象了.

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

四：html本地存储传值篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
Post.htm

代码如下:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script>
 7         function set() {
 8             //由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
 9             if (window.localStorage) {
10                 //存储变量的值
11                 localStorage.name = document.all.username.value;
12                 location.href = 'read.html';
13             } else {
14                 alert("NOT SUPPORT");
15             }
16         }
17     </script>
18 </head>
19 <body>
20     <input type="text" name="username" />
21     <input type="button" name="" value="post" οnclick="set()"/>
22 </body>
23 </html>

Read.html

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script>
 7         var value = localStorage["name"];
 8         alert(value);
 9     </script>
10 </head>
11 <body>
12
13 </body>
14 </html>

优点:最好的解决方法.

缺点:可能浏览器不支持.

转载于:https://www.cnblogs.com/EdwinChan/p/6387056.html

javascript HTML静态页面传值的四种方法相关推荐

静态html页面传递参数,javascript静态页面传值的三种方法分享
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm function Post() { //单个值 Read.htm?username=b ...
java多线程传值覆盖_Java 多线程传值的四种方法
其实大家都知道多线程传值有三种方式: 1:通过构造方法传递数据 2:通过变量和方法传递数据 3:通过回调函数传递数据那么博主有个非常变态的需求,所以找出了第四种实现方式,先看效果图: 动态Cron4 ...
java线程异步传值_Java 多线程传值的四种方法
Java 多线程传值的四种方法作者: sunjs 更新时间:2020-09-11 15:20:16 原文链接其实大家都知道多线程传值有三种方式: 1:通过构造方法传递数据 2:通过变量和方法传递数 ...
HTML前端页面颜色的四种方法，色号表
HTML前端页面颜色的四种方法,色号表颜色的三种表示方式: (1)单词:red green black-用法: <font color="pink" size=" ...
swf 在html页面平铺,四种方法实现动画SWF文件全屏效果
如何让SWF文件全屏的效果? 第一种方法: 不显示浏览器菜单栏.工具栏的全屏.这种全屏稍稍复杂,也与 FLASH 的设置无关,但要借助JavaScript来完成.方法是:在HTML文件中间加入以下代码 ...
ASP.NET实现页面传值的几种方法
第一种方法通过URL链接地址传递以下为引用的内容: send.aspx: protected void Button1_Click(object sender, EventArgs e) ...
html中看到php代码_分享查看页面源代码的四种方法
前端开发人员在浏览网页时,遇到自己喜欢的网页,总想看看代码是怎么写的,也有些人需要对网页源代码进行修改,那你知道怎么查看一个网页的源代码吗?这篇文章就和大家讲讲如何查看源代码,以及不同浏览器的查看源代 ...
HTML：调用静态页面html 的几种方法
今天做办公用品管理系统时,发现需要用到在一个静态页面html 中调用多个静态页面html的内容.查找资料总结了以下一些方法: 一.iframe引入的方法代码如下: &l ...
Flex 页面跳转四种方法
在学习Flex的过程中,你可能会遇到Flex页面跳转的问题,本文和大家分享一下,页面在flex里面其实就是一个个的 Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一 ...

javascript HTML静态页面传值的四种方法

javascript HTML静态页面传值的四种方法相关推荐

最新文章

热门文章