js中url跳转问题
问题描述:列表中有不同的企业名字,每个企业名字都有一个不同的链接,用id做为参数区分。点击不同的名字,根据id的不同跳转到对应的详情页,设置连接如下:
1. url = http://localhost:3000/test#/detail?id="123456"
2. url = http://localhost:3000/test#/detail?id="456789"
两个链接除了参数id的值不同其他的都是相同的,这样看来通过window.location.href = url;应该是能够实现跳转了吧(前提:id是真是有效的)。但是真是运行起来后发现并不像我们想象的那样正常,第一个链接跳转了,第二个链接不跳转了。
问题原因:后来通过各种折腾,终于找出原因;因为第一次正常跳转,页面地址变成 http://localhost:3000/test#/detail?id="" ,第二次要跳转http://localhost:3000/test#/detail?id=""的时候,浏览器页面没有刷新跳转,由于浏览器是以锚点(“#”)为界限,判断当前页面链接和将要跳转的链接的锚点以前的地址是否一致,如果一致则不刷新页面,如果不一致则刷新。这里因为我们除了id不同其余的都一样,所以浏览器是有更新链接的,只是页面没有实现跳转,页面没有得到刷新。
解决办法:将跳转链接更改为 http://localhost:3000/test?id="456789"#/detail 其实就是把锚点(#/detail),放到最后面,这样,锚点以前的内容就会根据id的不同而显得不一样了,这样浏览器就会为我们刷新并跳转页面了
一、iframe中几种跳转方式:
- 当前窗口(当前iframe跳转)
- window.location.href = url;
- location.href = url;
- self.location.href = url;
js中url跳转问题的更多相关文章
- HTML+JS中网页跳转的写法
1.html中使用meta中跳转,通过meta可以设置跳转时间和页面 <head> <!--只是刷新不跳转到其他页面 --> <meta http-equiv=" ...
- JS中URL编码参数(UrlEncode)
JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...
- 用 js 做 URL 跳转带来的 Referer 丢失问题.
http 302 重定向是可以保持 referer 的.例:在 A 页面上提交登录表单到 B,B 返回一个重定向页面到 C,在 C 处理里面检查 Referer 可知道它的来源是 A 而不是 B. 但 ...
- 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂) 简述项目流程: 1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该 ...
- Node.js中url的详解
var url = require('url');var str = 'http://zhufengnodejs:123@github.com:80/2016jsnode?name=zfpx& ...
- js中页面跳转几种方法
<script> function toLogin(){ //第一种 //self.location="/zhld/toTestLogin"; //第二种 top.lo ...
- js中url解码
var name = window.location.search.substr(4,30);//name = decodeURI(name);//使用示例document.getElementByI ...
- js中页面跳转(href)中文参数传输方式
编码: escape(参数); 解码: unescape(参数);
- js中url有中文的转码方法
转载:https://www.cnblogs.com/chiangfai/p/6073000.html
随机推荐
- win7局域网共享文件
调整共享文件所在电脑设置: 1. 关闭防火墙 2. 更改网络设置 ①打开网络和共享中心 ②进入"选择家庭组和共享选项" ③进入"更改高级共享设置" ④调整设置并 ...
- springmvc log4j 配置
web.xml 增加 <context-param> <param-name>log4jConfigLocation</param-name> <param- ...
- zip-gzip-bzip2_压缩文件
问:为什么要压缩文件? 答:方便传输,因为压缩的文件容量会比较小 存储所使用的空间也会比较小 ---> 备份 Windows里的压缩软件:WinRAR.Zip.好压.2345 ...
- R语言-聚类与分类
一.聚类: 一般步骤: 1.选择合适的变量 2.缩放数据 3.寻找异常点 4.计算距离 5.选择聚类算法 6.采用一种或多种聚类方法 7.确定类的数目 8.获得最终聚类的解决方案 9.结果可视化 10 ...
- 通过 Service 访问 Pod - 每天5分钟玩转 Docker 容器技术(136)
本节开始学习 Service.我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 controller 会通 ...
- sphinx初识
sphinx(SQL Phrase Index),查询词组索引. 定义:Sphinx是一个全文检索引擎. 特性: 1.高速索引 (在新款CPU上,近10 MB/秒); 2.高速搜索 (2-4G的文本量 ...
- Java基础系列--集合之ArrayList
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8494618.html 一.概述 ArrayList是Java集合体系中最常使用,也是最简单 ...
- 机器学习策略——DeepLearning.AI课程总结
一.什么是ML策略 假设你正在训练一个分类器,你的系统已经达到了90%准确率,但是对于你的应用程序来说还不够好,此时你有很多的想法去继续改善你的系统: 收集更多训练数据 训练集的多样性不够,收集更多的 ...
- 使用sed删除拼音的音调
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- Ironic几种不同的场景下的网络拓扑
最近帮领导做了几页ppt,总结几种场景下ironic管理物理机网络的网络拓扑,简单做成一份文章记录下.只是方便自己记忆,没有认真修改.如果对ironic有一定了解,可以看下,加深理解. 1. vlan ...