问题描述:列表中有不同的企业名字,每个企业名字都有一个不同的链接,用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. CEF小白人系列2-DEV环境配置-Windows10+SDK+VS2015

    以下资料整理来自CEF官方教学.作者做了翻译和整理.并会以一种重事件操作的方式来一点点入门. 3个问题: 在上一篇内容中我们了解了什么是CEF,能干些什么.必要的物理学习环境. 下面我们也是以带着问题 ...

  2. Shell 编程入门

    首先创建一个文件: 在终端中输入如下命令: vi helloworld.sh 然后按i进行命令编写 下面这句话是必须写的 #!/bin/sh这句话是必须写的 #!/bin/sh a="hel ...

  3. MysqL应该考虑到的安全策略

    1:使用预处理语句防止SQL注入2:写入数据库的数据要进行特殊字符的转义,比如字符中带单引号和双引号需要在应用层转义,这样为了防止SQL注入3:查询的错误信息不要返回给用户,将错误记录到日志.错误信息 ...

  4. 1×1卷积的用途(Network in Network)

    1×1卷积,又称为Network in Network 如果卷积的输出输入都只是一个平面,那么1x1卷积核并没有什么意义,它是完全不考虑像素与周边其他像素关系. 但卷积的输出输入是长方体,所以1x1卷 ...

  5. 《android开发艺术探索》读书笔记(十二)--Bitmap的加载和Cache

    接上篇<android开发艺术探索>读书笔记(十一)--Android的线程和线程池 No1: 目前比较常用的缓存策略是LruCache和DiskLruCache,LruCache常被用作 ...

  6. WinSock WSAEventSelect 模型总结

    前言 本文配套代码:https://github.com/TTGuoying/WSAEventSelect-model 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理 ...

  7. Android虚拟机安装

    由于虫师那边的源估计到期了,我又找了一波. 打开SDK Manager.exe, 就在安卓目录下. 点击Tools--Options进入配置页面 mirrors.neusoft.edu.cn 配置如下 ...

  8. 内置函数值 -- chr() ord() -- 字符和ascii的转换

    英文文档: chr(i) Return the string representing a character whose Unicode code point is the integer i. F ...

  9. openstack-ocata-计算服务4

    一. 计算服务概览 使用OpenStack计算服务来托管和管理云计算系统.OpenStack计算服务是基础设施即服务(IaaS)系统的主要部分,模块主要由Python实现. OpenStack计算组件 ...

  10. NLP︱句子级、词语级以及句子-词语之间相似性(相关名称:文档特征、词特征、词权重)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 关于相似性以及文档特征.词特征有太多种说法.弄 ...