js 页面之间的跳转、传参以及返回上一页
2015-12-22 18:05
801 查看
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、实例展示
// 跳转url 以及传递的参数
window.location.href='http://img.as.com/news/image/newscenter/20111107zt/whd/30share/jieguo1n.html?money='+nums+'&url='+fxurl;
// 获取money,以及分型的地址
function GetRequest() {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
//alert(str);
var strs= new Array();
strs = str.split('&');
var money=strs[0].substring(6);
fxurl=(strs[1].substring(4)).trim();
//alert(fxurl);
var view=money+"元";
$("#jieguo1m").html(view);
}
}
GetRequest();
这样当跳转到url指定的页面后,调用GetRequest();这个函数,函数中的location.search;来获取了url中?后的所有参数,接下来就是按照需求来解析了。
二、返回上一页
1、在原来的窗体中直接跳转用window.location.href="test.html";2、返回上一页原页面中的表单中的数据会丢失
window.history.go(-1);
3、返回上一页原页面 表单中的内容会保留
window.history.back();
实例:
1、
<input type=button value=刷新 onclick="window.location.reload()">
<input type=button value=前进 onclick="window.history.go(1)">
<input type=button value=后退 onclick="window.history.go(-1)">
<input type=button value=前进 onclick="window.history.forward()">
<input type=button value=后退 onclick="window.history.back()">
2、
<a href="javascript:history.go(-1)">返回上一页</a>
<a href="javascript:location.reload()">刷新当前页面</a>
<a href="javascript:" onclick="history.go(-2); ">返回前两页</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>
<a href="javascript:" onclick="history.back(); ">返回上一页</a>
这里看到了 <a href="javascript:">就说说这个:
<a href=”javascript:” onclick=”fun1()” > </a>
<a href=”javascript: undefined” onclick=”fun1()” > </a>
<a href=”javascript:void(0)” onclick=”fun1()” > </a>
这三种方式,要实现的效果是一样的。即不执行跳转而是执行对应的函数,而JavaScript:void(0)在页面内容很多的时候会好一些
而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧,所以我们不要这样写:<a href=javascript:function()> </a>
相关文章推荐
- 小技巧之js导出word
- json-lib 之jsonConfig详细使用
- 小技巧之js判定上传文件大小
- js之第三方工具解析JSON
- jsp页面静态化实例
- JsonUtil
- JavaScript当中网页刷新后数值(text、radio、checkbox、select、textarea)保持不变(输入域数据保持)的简单方法
- js仿微博实现统计字符和本地存储功能
- js 上传图片预览 在网上找的例子,很好使
- JavaScript 数组对象获得input输入框的值,并设置
- js 的 math 函数
- JavaScript基础——使用Canvas画图
- 开源的轻量级JSON存储Kinto介绍
- JSTL实现递归展示树型结构数据
- js DOM Document类型
- JSTL分割字符 fn:split()
- js类型与检查
- js操作iframe框架时应该屡清楚的一些概念
- 接着上篇继续搭建restfull风格的webservice并返回json格式的值
- extjs 必须项目前面红色星号