JS method of implementing HTML static page pass value

Source: Internet
Author: User
Tags setcookie

JS method to implement HTML static page-passing value front-end development-Vouffenbeau release: 2012-10-29 Category: JavaScript read: 8,735 times

The use of JS method here to achieve the static value between the page transfer, in fact, very simple, not much to say, see the code, first look at the index.html page code, as follows:

Add this line of code between the body tags

<form action= "a.html?d1=123&d2= Hello" method= "post" name= "f1″id=" f1″>
<input type= "Submit" Name= "s1″id=" s1″value= "Submit"/>
</form>

Then, we create a new a.html page, and also add this line of code between the body tags, as follows:

<script type= "Text/javascript" >
var Tmparr;
var QueryString;
var URL = document.location.toString ();
if (Url.lastindexof ("?")! =-1) {
Querystring= url.substring (Url.lastindexof ("?") +1,url.length);
Tmparr=querystring.split ("&");
for (i=0;i<=tmparr.length–1;i++) {
document.write ("parameter:" + tmparr[i] + "<br/>");
}
}

else{
QueryString = "";
}
</script>

Some other methods and examples of JS static page passing:

One: JavaScript static page value pass the URL Chapter
Can pass the URL to the value. Connect the information you want to pass to the URL.
Example:
Parameter Outgoing page post.htm->

<input type= "text" name= "username" >
<input type= "text" name= "Sex" >
<input type= "button" value= "Post" >
<script language= "JavaScript" >
function Post ()
{
Single value Read.htm?username=baobao;
Multiple full value read.htm?username=baobao&sex=male;
url = "Read.htm?username=" +escape (Document.all.username.value);
URL + = "&sex=" + Escape (document.all.sex.value);
Location.href=url;
}
</script>

Parameter Receive page read.htm->

<script language= "JavaScript" >
/*
* ————— read.htm ————— –
* Request[key]
* Function: Implement ASP Get URL string, Request ("AAA")
* Parameters: Key, String.
* Example: Alert (request["AAA"])
* ————— request.htm ————— –
*/
var Url=location.search;
var Request = new Object ();
if (Url.indexof ("?")! =-1)
{
var str = URL.SUBSTR (1)//Remove No.
STRs = Str.split ("&");
for (Var i=0;i<strs.length;i++)
{
Request[strs[i].split ("=") [0]]=unescape (strs[i].split ("=") [1]);
}
}
Alert (request["username"])
Alert (request["Sex"])
</script><script language= "JavaScript" >
<!–
function Request (strName)
{
var strhref = "www.abc.com/index.htm?a=1&b=1&c= test test";
var intpos = Strhref.indexof ("?");
var strright = strhref.substr (intpos + 1);
var arrtmp = Strright.split ("&");
for (var i = 0; i < arrtmp.length; i++)
{
var arrtemp = Arrtmp[i].split ("=");
if (arrtemp[0].touppercase () = = Strname.touppercase ()) return arrtemp[1];
}
Return "";
}
Alert (Request ("a"));
Alert (Request ("B"));
Alert (Request ("C"));
–>
</script>
<script>
String.prototype.getQuery = function (name)
{
var reg = new RegExp ("(^|&)" + name + "= ([^&]*) (&|$)");
var r = this.substr (This.indexof ("?") +1). Match (REG);
if (r!=null) return unescape (r[2]); return null;
}
var str = "www.abc.com/index.htm?a=1&b=1&c= test test";
Alert (Str.getquery ("a"));
Alert (Str.getquery ("B"));
Alert (Str.getquery ("C"));
</script>

Advantages: It is convenient to take the value. You can cross domains.
Disadvantage: There is a limit to the value length

Second: JavaScript static page value pass the cookie
A cookie is a browser that stores a small amount of named data.
It is associated with a particular Web page or site.
Cookies are used to provide memory to the browser,
So that scripts and server programs can use the input data of another page in one page.

Parameter Outgoing page post.htm->

<input type= "text" Name= "txt1″>
<input type= "button" value= "Post" >
<script language= "JavaScript" >
function Setcookie (name,value)
{
/*
* ————— Setcookie (name,value) ————— –
* Setcookie (Name,value)
* Function: Set the value of the variable name
* Parameters: Name, string, value, String.
* Example: Setcookie (' username ', ' Baobao ')
* ————— Setcookie (name,value) ————— –
*/
var days = 30; This cookie will be saved for 30 days
var exp = new Date ();
Exp.settime (Exp.gettime () + days*24*60*60*1000);
Document.cookie = name + "=" + Escape (value) + "; expires=" + exp.togmtstring ();
Location.href = "read.htm"; Receive the page.
}
</script>

Parameter Receive page read.htm->

<script language= "JavaScript" >
function GetCookie (name)
{
/*
* ————— GetCookie (name) ————— –
* GetCookie (name)
* Function: Gets the value of the variable name
* Parameters: Name, String.
* Example: Alert (GetCookie ("Baobao"));
* ————— GetCookie (name) ————— –
*/
var arr = Document.cookie.match (New RegExp ("(^|)" +name+ "= ([^;] *) (; |$) "));
if (arr!=null) return unescape (arr[2]); return null;
}
Alert (GetCookie ("Baobao"));
</script>

Advantage: can be accessed within any Web page within the same origin. Life can be set.
Disadvantage: There is a limit to the value length.
Three: window.open of JavaScript static page value passing
There is a relationship between the two windows. Parent Window parent.htm Open child window son.htm
The child window can point to the parent window through Window.opener. This allows access to the parent window's object.

<input Type=text name=maintext>
<input Type=button value= "Open" >
Read.htm
<script language= "JavaScript" >
window.open the open window.
Use opener to point to the parent window.
var parenttext = Window.opener.document.all.maintext.value;
alert (Parenttext);
</script>

Advantages: The value is convenient. As long as Window.opener points to the parent window, you can access all objects. You can access not only the value, but also the method of the parent window. The value length is unlimited.
Cons: Two window to have a relationship. is a window opened with window.open. Cannot cross domain.

Reprint Please specify: JS implementation of HTML static page transfer value Method-front-end development-Vouffenbeau

JS method of implementing HTML static page pass value

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.