问题描述:列表中有不同的企业名字,每个企业名字都有一个不同的链接,用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跳转问题的更多相关文章

  1. HTML+JS中网页跳转的写法

    1.html中使用meta中跳转,通过meta可以设置跳转时间和页面 <head> <!--只是刷新不跳转到其他页面 --> <meta http-equiv=" ...

  2. JS中URL编码参数(UrlEncode)

    JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...

  3. 用 js 做 URL 跳转带来的 Referer 丢失问题.

    http 302 重定向是可以保持 referer 的.例:在 A 页面上提交登录表单到 B,B 返回一个重定向页面到 C,在 C 处理里面检查 Referer 可知道它的来源是 A 而不是 B. 但 ...

  4. 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用

    结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂) 简述项目流程: 1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该 ...

  5. Node.js中url的详解

    var url = require('url');var str = 'http://zhufengnodejs:123@github.com:80/2016jsnode?name=zfpx& ...

  6. js中页面跳转几种方法

    <script> function toLogin(){ //第一种 //self.location="/zhld/toTestLogin"; //第二种 top.lo ...

  7. js中url解码

    var name = window.location.search.substr(4,30);//name = decodeURI(name);//使用示例document.getElementByI ...

  8. js中页面跳转(href)中文参数传输方式

    编码: escape(参数); 解码: unescape(参数);

  9. js中url有中文的转码方法

    转载:https://www.cnblogs.com/chiangfai/p/6073000.html

随机推荐

  1. CENTOS6.6下mysql5.7.11的percona-xtrabackup安装与备份

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn Xtrabackup有两个主要的工具:xtrabackup.inno ...

  2. css命名整理

    .container { width: 720px; background: #fafafa; border: 2px dashed #999; padding: 10px; float: left ...

  3. .NET Core阿里大于短信发送SDK修改以及使用

    一.问题背景 继上次七牛云SDK的问题之后(参考:http://www.cnblogs.com/OMango/p/8447480.html),在发送短信的功能上又出现了问题,我们短信服务使用的是阿里大 ...

  4. wpf 如何让控件左右移动

    通过DoubleAnimation可以让控件进行左右移动. <Canvas x:Name="canvas_Shape" HorizontalAlignment="S ...

  5. 如何通过 ZAZ-020 电容指纹模块采集指纹信息?

    #ifndef _PROTOCOL_H_ #define _PROTOCOL_H_ ///////////////////错误返回码//////////////////// #define PS_OK ...

  6. Web自动化之Headless Chrome测试框架集成

    使用Selenium操作headless chrome 推荐 简介 WebDriver是一个W3C标准, 定义了一套检查和控制用户代理(比如浏览器)的远程控制接口,各大主流浏览器来实现这些接口以便调用 ...

  7. OpenStack中memcached的使用和实现

    概述 主要分享下个人对Liberty版本openstack中cache使用的理解,由于作者水平有限,难免有所错误,疏漏,还望批评指正. openstack中可以使用cache层来缓存数据,Libert ...

  8. 遍历对象属性(for in、Object.keys、Object.getOwnProperty)

    js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...

  9. shell 批量创建带随机字符串的html文件

    思路一: echo $RANDOM|md5sum |tr "[0-9]" "[a-j]"|cut -c 2-11 RANDOM:  linux内置的随机数变量 ...

  10. TCP协议—三次握手四次挥手的原理<转>

    三次握手四次挥手的原理   TCP是面向连接的,无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接.在TCP/IP协议中,TCP 协议提供可靠的连接服务,连接是通过三次握手进行初始化的.三 ...