JavaScript implementation of Web page jump and Page transfer value method _javascript skills

Source: Internet
Author: User
But sometimes, when an event is triggered, we first do some operations, and then jump, at this point, we need to use JavaScript to achieve this jump function.
The following are the specific practices:
One: Jump to a new page, and when opened in a new window:
Copy Code code as follows:

function GoGoGo ()
{
Do someghing ...
window.open ("test2.html");
}

Window is a JavaScript object that can be used with its open method, and it should be noted that if the page is not a relative path, add http://, such as:
Copy Code code as follows:

function GoGoGo ()
{
window.open ("http://www.google.com");
}

Two: In this page of the window to jump:
Copy Code code as follows:

function Totest2 ()
{
Window.location.assign ("test2.html");
}

If you use Location.assgin () directly, you can, but window.location.assign () seems more reasonable, the assign () method of the current window's Location object.
In addition, the location object also has a method replace () can also do a page jump, which differs from the Assign () method:
The replace () method does not generate a new record in the History object. When this method is used, the new URL overwrites the current record in the History object.

Here's how to pass the value when the page jumps, and when you open a new page with window.open (), the browser thinks there's a relationship between these two windows open and open. So there is a Window.opener attribute in the Window object of the current windows in the new window that is opened, which contains a reference to the open window, so you can get this value and then reference the value of the object in the previous page, as shown in the following example:

Copy Code code as follows:

<title>test1</title>
<script type= "Text/javascript" >
function Totest2 ()
{
window.open ("test2.html");
}
</script>
<body>
<label id= "Label1" >page test1</label>
<br><br>
<input type= "text" id= "TX1" >
<input type= "button" id= "BT2" value= "to Test2" onclick= "Totest2 ()" >
</body>


Copy Code code as follows:

<title>test2</title>
<script type= "Text/javascript" >
function GetValue ()
{
var Pare=window.opener;
if (pare!=null)
{
var What=pare.document.getelementbyid ("Tx1");
if (what!=null)
{
alert (What.value);
}
}
}
</script>
<body>
<label id= "Label1" >page test2</label>
<br><br>
<input type= "button" onclick= "GetValue ()" value= "Get test1 page value" >
</body>


These two pages can get the value from the previous page from the next page, but I feel like it's not very practical ...
Advantage: The value is convenient. You can access all objects as long as the window.opener points to the parent window.
You can access not only the values, but also the methods of the parent window. The value length is unlimited.
Disadvantages: Two windows have a relationship. is the window that is opened using window.open. Cannot cross domain.

Here's another way to use URL-attached fields to pass values between page jumps, which are used in front of XMLHttpRequest. The simple original example is as follows:

Copy Code code as follows:

<title>test3</title>
<script type= "Text/javascript" >
function Totest2 ()
{
var Parm1=document.getelementbyid ("Tx1"). Value;
var Parm2=document.getelementbyid ("Tx2"). Value;
var myurl= "test4.html" + "?" + "parm1=" +parm1+ "&parm2=" +PARM2;
Window.location.assign (Myurl);
}
</script>
<body>
<label id= "Label1" >page test3</label>
<br><br>
<input type= "text" id= "TX1" >
<input type= "text" id= "TX2" >
<input type= "button" id= "BT2" value= "to Test2" onclick= "Totest2 ()" >
</body>

Copy code code as follows:

<title>test1</title>
& Lt;script type= "Text/javascript" >
Function Getparm1 ()
{
var url=location.href;
var tmp1=url.split ("?") [1];
var tmp2=tmp1.split ("&") [0];
var tmp3=tmp2.split ("=") [1];
Var Parm1=tmp3;
Alert (PARM1);
}
Function Getparm2 ()
{
var url=location.href;
var tmp1=url.split ("?") [1];
var tmp2=tmp1.split ("&") [1];
var tmp3=tmp2.split ("=") [1];
Var Parm2=tmp3;
Alert (PARM2);
}
</script>
<body>
<label id= "Label1" >page test4</label> ;
<br><br>
<input type= "button" id= "BT1" value= "Get Parm1" onclick= "Getparm1 ()" >
<BR&G t;<br>
<input type= "button" id= "BT2" value= "Get Parm1" onclick= "Getparm2 ()" >
</body>
& Lt;/html>

I remember the front in the look at the XMLHttpRequest when there is a QueryString object can be directly from the URL parameters, I do not know if this could be used directly, try it seems not.

The last way to pass the value of the page is cookie sharing, this is easier to understand, by a page in the client machine place a cookie file, the next page access, directly read the value of this is OK.

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.