js实现html 页面之间的跳转传参以及返回上一页的相关知识点

一、页面之间的跳转传参

1、在页面之间跳转的方式有两种:

window.location.href=”test.html?num=10”   地址会改变参数也会被传递但是不会打开新窗口

window.open("test.html") 这样会重新打开一个新窗口。

2、获取参数

如果是按照第一种方式进行了传递则有参数,那么我们怎们获取url中的参数那,那就使用js默认的属性:  var url = location.search; 

其中的location.search 就是js自动获取url中? 后的所有值。获取了这个之后就可以使用substring,split等来获取参数了。

3、实例展示

1.         // 跳转url 以及传递的参数  
2. 'http://img.as.com/news/image/newscenter/20111107zt/whd/30share/jieguo1n.html?money='+nums+'&url='+fxurl;  
3.   
4. // 获取money,以及分型的地址  
5. function GetRequest() {  
6. var url = location.search;   
7. var theRequest = new Object();  
8. if (url.indexOf("?") != -1) {  
9. var str = url.substr(1);  
10. //alert(str);  
11. var strs= new Array();     
12. '&');  
13. var money=strs[0].substring(6);  
14.             fxurl=(strs[1].substring(4)).trim();  
15. //alert(fxurl);  
16. var  view=money+"元";  
17. "#jieguo1m").html(view);  
18.       }  
19. }  
20. GetRequest();


这样当跳转到url指定的页面后,调用GetRequest();这个函数,函数中的location.search;来获取了url中?后的所有参数,接下来就是按照需求来解析了。


二、返回上一页

1、在原来的窗体中直接跳转用

1. window.location.href="test.html";

2、 返回上一页原页面中的表单中的数据会丢失

1. window.history.go(-1);

3、 返回上一页原页面 表单中的内容会保留

1. window.history.back();

实例:

1、

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

2、

1. <a href="javascript:history.go(-1)">返回上一页</a>   
2. <a href="javascript:location.reload()">刷新当前页面</a>   
3. <a href="javascript:" οnclick="history.go(-2); ">返回前两页</a>   
4. <a href="javascript:" οnclick="self.location=document.referrer;">返回上一页并刷新</a>   
5. <a href="javascript:" οnclick="history.back(); ">返回上一页</a>

这里看到了 <a href="javascript:">就说说这个:

1. <a href=”javascript:” οnclick=”fun1()” >  </a>  
2. <a href=”javascript: undefined” οnclick=”fun1()” >  </a>  
3. <a href=”javascript:void(0)” οnclick=”fun1()” >  </a>  
4. 这三种方式,要实现的效果是一样的。即不执行跳转而是执行对应的函数,而JavaScript:void(0)在页面内容很多的时候会好一些  
5. 而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧,所以我们不要这样写:<a href=javascript:function()>  </a>  
6.