js 页面之间的跳转、传参以及返回上一页
JS 以及 页面 之间 返回 跳转 传参 一页
2023-09-27 14:24:56 时间
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";
- window.history.go(-1);
- 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引用类型指针的工作方式
- js - object.assign 以及浅、深拷贝
- vue - webpack.dev.conf.js for HtmlWebpackPlugin
- 【JS】axios框架
- 有关不同浏览器不同版本号的css以及js计算高度的问题
- JS leetcode 检查单词是否为句中其他单词的前缀 解题分析,活用startsWith方法
- 【JS点滴】substring和substr以及slice和splice的用法和区别。
- 添加网络js文件
- JS中的进制转换以及作用
- js ie下有效 showModalDialog 、showModelessDialog
- 基于原型的js语言
- Dynamic CRM 2013学习笔记(二十三)CRM JS智能提示(CRM 相关的方法、属性以及页面字段),及发布前调试
- JS 数组与字符串之间的相互转化
- 有趣的HTML实例(十四) 窗边风景动画(css+js)
- js中表达式 >>> 0 浅析 (以及用php简单翻译)
- js中值的基本类型与引用类型,以及对象引用,对象的浅拷贝与深拷贝
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] 设计模式系列课程 - 迭代器(1)
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)
- 前端比较好的学习资料(包括js和css)以及 最全前端资源汇集
- js实现类似qq表情(插入图片以及获取光标的效果)
- js随机生成一个数组中的随机字符串以及更新验证码
- 浅析Node.js的宏任务与微任务、本轮与次轮循环、事件循环概念及其6个阶段解析以及代码分析nodejs与浏览器的Event Loop差异
- node+js实现大文件分片上传
- 浅析JS获取当前网页内容,创建文件并下载,URL.createObjectURL和URL.revokeObjectURL介绍
- JS中几种常见的高阶函数
- js中window.location.search的用法和作用。以及自定义存储和读取localStorage的API(重要)
- cef3 获得js 返回值, 以及js 指挥delphi 函数的 总结参考
- QQ空间留言的JS
- 将Ext JS 5应用程序导入Web项目以及实现本地化
- Three 之 three.js (webgl)旋转属性函数的简单整理,以及基于此实现绕轴旋转的简单案例
- Chart.js报告
- Vue.js中 watch的理解以及深度监听
- JS 公共方法
- js封装的Toast消息提示框,可作为消息提示、警示框、报错提示、确认框等,很方便好用!
- js获取当前域名、Url、相对路径和参数以及指定参数