Method other than form submission
1. Jump to a new page and open it in a new window:
function gogogo()
{
//do someghing here...
window.open("target.html");
} Windows is a javascript object and can be used with its open method. It should be noted that if the page is not a relative path, then add http://, for example:
function gogogo()
{
window.open( "http://www.google.com");
} 2. Jump right in the window of this page:
function totest2()
{
window.location.assign( "target.html");
}
It's also possible to use location.assgin() directly, but window.location.assign() seems more reasonable. The assign() method of the location object of the current window.
In addition, the location object has another method, replace(), which can also do page jumps. It differs from assign() in that:
The replace() method does not generate a new record in the History object. When using this method, the new URL overrides the current record in the History object.
Pass the value when the page jumps
1. When opening a new page with window.open(), the browser will assume that there is an open-open relationship between the two windows. Therefore, in the new window opened, there is a window.opener attribute in the window object of the current window. This value contains a reference to the open window, so you can get this value and then refer to the value of the object in the previous page.
<html>
<head>
<title>test1</title>
<script type="text/javascript">
function totest2()
{
window.open("test2.html");
}
</script>
</head>
<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>
</html>
<html>
<head>
<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>
</head>
<body>
<label id="label1" >page test2</label>
<br><br>
<input type="button" onclick="getvalue()" value="get test1 page value">
</body>
</html> These two pages, you can get the value of the previous page from the latter page, but I don't feel very practical...
Advantages: It's easy to get values. As long as window.opener points to the parent window, all objects can be accessed.
Not only can you access the value, but also the method of the parent window. The length of the value is unlimited.
Disadvantage: There must be a relationship between the two windows. That is, the window opened by window.open. It can not cross-domain.
- Passing Value Between Page Jumps Using URL Additional Fields
location.href gets the current page access path
<html>
<head>
<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>
</head>
<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>
</html> <html>
<head>
<title>test1</title>
<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>
</head>
<body>
<label id="label1" >page test4</label>
<br><br>
<input type="button" id="bt1" value="get parm1" onclick="getparm1()">
<br><br>
<input type="button" id="bt2" value="get parm1" onclick="getparm2()">
</body>
</html> - The last way to pass values between pages is COOKIE sharing, which is easy to understand. A COOKIE file is placed by one page on the client machine. When the next page is visited, it will read the value of the COOKIE file directly.
I haven't thought of this example yet. I'll make it up later.